为什么CSS在Chrome正常却在Safari里布局错乱？-css教程-PHP中文网

先用safari开发者工具computed面板验证display是否为block或grid-template-columns是否为空，确认是否被静默丢弃；再改用显式行列定位、100dvh+@supports降级、clip-path替代overflow等兼容写法修复。

为什么css在chrome正常却在safari里布局错乱？

不是你的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 动态设 --vh CSS 变量，再在样式中引用 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 面板能实时显示轨道编号和元素实际占用区域，比桌面模拟器准得多。