Safari ≤10.1 对 CSS Grid 支持残缺，需显式写 display: -webkit-grid、-webkit-grid-gap，并避免 grid-template-areas 和 fr/minmax() 等特性，autoprefixer 不会自动补全前缀，@supports 应组合检测以防止半生效。
因为 Safari ≤10.1 对 CSS Grid 的支持是残缺的——它只认 -webkit-grid，不支持 grid-gap、grid-template-areas、fr 单位等关键特性，且 autoprefixer 完全不会帮你补这些缺口。
display: grid 在 Safari 10.1 中根本无效
你写的 display: grid 在 Safari ≤10.1 里会被直接忽略，整个容器退化为 display: block，布局彻底崩塌。这不是样式没生效，而是声明压根没被解析。
- 必须显式写成
display: -webkit-grid，再紧跟display: grid作现代浏览器 fallback -
grid-template-columns和grid-template-rows可以保留（Safari 10.1 支持），但其中的minmax()、fit-content()和fr单位表现极不稳定，建议改用px或% - 别指望 autoprefixer 自动加
-webkit-前缀：即使配置了browserslist: ["safari 10"]，它也不会输出display: -webkit-grid
grid-gap 在旧 Safari 中静默失效
grid-gap: 12px 在 Safari ≤10.1 中等于没写，既不报错也不渲染，子元素会紧贴在一起。
- 必须双写：
-webkit-grid-gap: 12px+grid-gap: 12px，顺序不能颠倒（前缀版在前） - autoprefixer 默认不处理这个，哪怕开了
grid: true，它也只展开gap为grid-row-gap/grid-column-gap，不加-webkit- - 更稳妥的降级是用
margin模拟：所有网格项加margin-right和margin-bottom，再用:nth-child清除末尾项，同时确保box-sizing: border-box
grid-template-areas 在 Safari ≤10.1 中完全不可用
这个属性无论加不加前缀，在 Safari ≤10.1 中都会导致整条 display: grid 规则被跳过，布局回退到流式排列。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须放弃
grid-template-areas，改用grid-column/grid-row显式定位每个子元素 - 若需保持语义，可在 JS 中检测
CSS.supports('display', 'grid')，对不支持的浏览器切换 class 启用 Flexbox 降级 - 切忌在同一样式块中混用
grid-template-areas和grid-column：Safari 会直接忽略整条规则
@supports 检测容易误判 Safari 10.1
只写 @supports (display: grid) 会让 Safari 10.1 进入 Grid 样式块——它能解析 display: grid，但后续属性如 grid-gap 或 fr 全部失效，结果是“半生效”导致布局错乱。
- 推荐组合检测：
@supports (display: grid) and (grid-template-columns: 1fr)，筛掉绝大多数旧 WebKit - 降级样式（如
display: flex）必须写在@supports块外部，否则 IE11 和 Safari 9 会直接跳过整块 - 别嵌套
@supports (gap: 1rem)：Safari 10.1 不认识gap语法，整块会被忽略，fallback 失效
最麻烦的不是写错，而是你以为写了就兼容了——Safari 10.1 会安静地执行一部分、忽略另一部分，最后留给你一个难以复现的视觉错位。真机测试不可跳过，模拟器往往掩盖问题。
