Safari旧内核（iOS 15.4/macOS 12.3前）对grid-template-areas、auto-fit、row-gap/column-gap等采用静默忽略策略，需改用显式行列线定位、gap合写、固定列数降级，并通过Computed面板和eruda验证是否生效。

不是 Safari “不支持”，而是它对某些 CSS 特性采取静默忽略策略——不报错、不警告，直接跳过整条声明，导致样式“看起来失效”。

检查 computed 样式确认是否真被解析

别靠肉眼判断，Safari 开发者工具里选中元素 → Computed 面板 → 搜索 display、grid-template-columns、gap 等关键属性：

• 如果 display 显示为 block 或其他非预期值，说明 display: grid 被丢弃了
• 如果 grid-template-columns 在 Styles 面板里为空或显示 none，就是解析失败的铁证
• 临时加 outline: 1px solid red 到子项上：若 outline 不贴网格线而是紧包内容，证明 Grid 根本没启动

这些写法在旧 Safari（iOS 15.4 / macOS 12.3 前）中会静默失效

它们语法合法，但 WebKit 旧内核根本不认：

• grid-template-areas → 改用显式 grid-column/grid-row，例如 header { grid-column: 1 / -1; }
• grid-column: span 2 → 改为 grid-column: 1 / 3（-1 兼容性比 span 好得多）
• repeat(auto-fit, minmax(280px, 1fr))) → auto-fit 在旧 Safari 中常被整个忽略，退化为单列；建议降级为 repeat(2, 1fr) 或配合 @media 固定小屏列数
• row-gap 或 column-gap → 必须改用合写 gap: 16px，旧版只识别这个

gap 失效？先看 overflow 和 box-sizing

gap 在旧 Safari 中“消失”，往往不是属性本身问题，而是两个隐藏条件触发：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

• 父容器设了 overflow: hidden → gap 推挤子项导致溢出被裁，视觉上像 gap 失效；临时改成 overflow: visible 验证
• 子项没设 box-sizing: border-box → padding/border 让实际尺寸超出轨道，看起来错位；所有网格项应统一加 * { box-sizing: border-box; }
• 避免在 grid 容器上混用 width: 100% + padding，改用 inset: 0 + padding 或嵌套一层子容器

别乱加 -webkit- 前缀，加错比不加更糟

现代 Safari（iOS 15.4+ / macOS 12.3+）已废弃大量旧前缀，加了反而触发静默忽略：

• display: -webkit-flex、-webkit-align-items 这类在 Safari 17+ 中已被移除，写了等于白写，还可能干扰标准属性解析
• 真正仍需前缀的极少：-webkit-backdrop-filter、-webkit-line-clamp、-webkit-appearance: none
• 查 caniuse.com 确认目标最低版本是否支持标准属性，不查就硬加前缀，大概率是白忙

真正麻烦的是 Safari 的“选择性执行”：它不报错，只是默默回退到流式布局。验证必须落到计算样式和真机 outline 上，而不是靠桌面模拟器或“看起来差不多”。