Safari旧版WebKit静默丢弃CSS声明导致布局异常，需用开发者工具Computed面板验证display、grid-template-columns等属性是否被跳过，并采用兼容写法如显式行列定位、gap合并声明、-webkit-sticky前置、100dvh配合@supports降级等修复。
在 Safari 浏览器中发现页面布局偏移（如网格错位、Sticky 失效、垂直居中上浮、100vh 溢出），往往不是代码写错，而是旧版 WebKit 内核静默丢弃关键 CSS 声明所致——它不报错、不警告，只让 display 变成 block、grid-template-columns 显示为空、outline 紧贴文字边缘，必须用开发者工具逐层验证才能定位真实断点。
确认是否真被 Safari 静默忽略
别靠截图或“看起来不对”下结论，打开 Safari 自带开发者工具 → Develop → Show Web Inspector → 选中偏移元素 → 切到 Computed 面板：
搜索 display:，若值为 block 或 inline，说明 display: grid 或 display: flex 整条声明已被跳过；
再搜 grid-template-columns:，若显示为空或 none，基本锁定是 Safari ≤15.3 不支持该语法；
立即学习“前端免费学习笔记（深入）”；
临时给子项加 outline: 1px solid red，如果 outline 贴着文字上下边缘而非按预期网格线对齐，证明 Grid 定位根本未触发。
真机调试务必用 eruda（CDN 引入后右下角唤出），它的 Grid 面板能实时显示轨道编号和元素实际占用区域，比桌面模拟器准得多。
修复 grid-template-areas 失效导致的错位
旧版 Safari（≤iOS 15.3 / Safari ≤15.2）完全不支持 grid-template-areas 字符串语法，会静默丢弃整条声明，回退为流式布局。你写的 "header main" "footer footer" 等于没写。
方法一：改用显式行列编号定位
header → grid-column: 1 / -1; grid-row: 1;（跨整行第 1 行）
nav → grid-column: 1; grid-row: 2;（第 2 行第 1 列）
main → grid-column: 2; grid-row: 2;（第 2 行第 2 列）
footer → grid-column: 1 / -1; grid-row: 3;（跨整行第 3 行）
【-1 表示隐式最后一根线，所有支持 Grid 的旧内核都认，比 span 2 更可靠】
必须同步补全容器轨道定义：grid-template-columns: 200px 1fr; 和 grid-template-rows: 60px auto 40px;，缺少这两句，旧内核可能按 auto 撑开导致高度塌陷或列宽异常。
方法二：避免在媒体查询中只改 template-areas
很多人以为移动端只写 @media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; } 就够了，但 Safari ≤14 根本不识别这行代码，结果仍是 block 布局。必须重写整套 grid-column/grid-row 定位规则。
修复 gap 失效引发的间距塌陷
iOS 14 及更早版本的 WebKit 不支持 row-gap 和 column-gap 单独声明，只认合写的 gap 属性。
把 row-gap: 12px; column-gap: 16px; 全部替换为 gap: 12px 16px;
注意：父容器若设 overflow: hidden，旧 Safari 下 gap 推挤会导致子项溢出被裁，看起来像 gap “消失”了——删掉这个 overflow 声明再验证。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
修复 position: sticky 粘不住的问题
第一步：检查祖先元素的 overflow 是否静默禁用
从 sticky 元素开始逐级向上点开父节点，在「Computed」里查 overflow-x 和 overflow-y；
常见藏雷位置：Modal 外层 wrapper、Card 容器、Tab 标签页根节点、微信小程序的 scroll-view（默认带 overflow: auto）；
不能删 overflow 时，用 clip-path: inset(0) 替代——视觉裁剪效果一致，但不创建新滚动上下文，也不干扰 sticky 的包含块计算。
第二步：确认 -webkit-sticky 是否正确声明
【必须写成 position: -webkit-sticky; 在前，position: sticky; 在后】
否则旧版 Safari 解析到非法值会跳过整行；不要写成 -webkit-position: sticky（属性名不存在）或只写标准声明。
修复 align-items: center 垂直居中上浮
Safari（尤其是 15–16 版本）对 flex-direction: row 下的基线对齐更敏感，尤其当子元素含内联内容（如文本、img、input）时，默认会尝试按 baseline 对齐，干扰 center 效果。
确保居中逻辑落在直接父容器上：.container { display: flex; align-items: center; height: 200px; }
仅给子元素设 align-self: center 或依赖祖先 flex 居中，Safari 往往不认。
父容器必须有明确高度（height 或 min-height），否则 Safari 可能按内容高度收缩，导致“居中”无参照；
避免用 padding 代替 height 撑高容器——Safari 有时把 padding 算进 flex 基线计算。
文字/内联元素仍偏移时，给子元素加 display: block 或 display: flex，消除内联特性干扰。
修复 100vh 在移动端导致的溢出或塌陷
首选 100dvh，但必须用 @supports 降级包裹整条规则，否则 iOS 15 及更早系统会完全忽略，页面塌成一条线。
正确写法：
.page { min-height: 100vh; }
@supports (min-height: 100dvh) { .page { min-height: 100dvh; } }
优先用 min-height 而非 height：避免内容超长时被强制裁剪，用户滑不到底部；
绝对定位元素若需填满视口，用 top: 0; bottom: 0; 替代 height: 100dvh，防止父容器无明确高度时失效。
