先用Safari开发者工具Computed面板验证display是否为block或grid-template-columns是否为空，确认是否被静默丢弃；再改用显式行列定位、100dvh+@supports降级、clip-path替代overflow等兼容写法修复。
不是你的CSS写错了，是Safari（更准确说是WebKit）静默丢弃了部分声明，且不报错、不警告——你看到的“错乱”，其实是它悄悄回退到了默认流式布局。
怎么确认是不是被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 定位根本没启动
为什么 grid-template-areas 在 Safari 里等于没写？
Safari ≤iOS 15.3 / macOS Monterey 12.3 完全不解析 grid-template-areas 字符串语法，会静默丢弃整条声明，回退为 block 布局。加 -webkit- 前缀无效，它早在2017年就移除了所有 Grid 私有前缀。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 改用显式行列定位：
grid-column: 1 / -1（跨整行）、grid-row: 2（第2行），-1表示隐式最后一根线，比span 2更可靠 - 必须同步补全容器轨道定义：
grid-template-columns: 200px 1fr和grid-template-rows: 60px auto 40px；缺这两句，旧内核可能按auto撑开导致高度塌陷 - 避免只在
@media中改grid-template-areas：Safari ≤14 根本不识别这行，结果仍是流式布局，必须重写整套grid-column/grid-row
为什么 position: sticky 和 100vh 在 Safari 里失效？
sticky 在 Safari 10 及更早版本存在渲染 bug，尤其嵌套滚动容器中常完全不触发；100vh 在 iOS Safari 中会把地址栏高度算进视口，导致实际可用高度变小，甚至内容被截断。
立即学习“前端免费学习笔记（深入）”；
-
sticky必须配@supports not(position: sticky)降级：position: fixed是最稳妥的 fallback，不要依赖 JS 模拟（真机上 touch 坐标偏移难调） -
100vh改用100dvh（Safari 15.4+ 支持），并用@supports (height: 100dvh)包裹；不支持时，用 JS 动态设--vhCSS 变量，再在样式中引用height: calc(var(--vh, 1vh) * 100) -
writing-mode: vertical-rl单独使用时，Safari ≤12.1 会让height: auto失效，容器塌成一条线；必须运行时检测getComputedStyle(el).textOrientation === 'mixed'，不满足就降级为transform: rotate(90deg)并手动互换宽高
最易被忽略的一点：你在 iPhone 上用 Chrome 或 Firefox 测试，其实和用 Safari 没区别——Apple 强制所有 iOS 浏览器使用 WebKit 渲染引擎，真机调试务必用 eruda（CDN 引入），它的 Grid 面板能实时显示轨道编号和元素实际占用区域，比桌面模拟器准得多。
