safari ≤15.3（ios 15.4前）静默丢弃部分css grid声明，导致display: grid退化为block、grid-template-columns为空、布局退化为流式；需禁用grid-template-areas、改用显式行列定位，并统一使用gap合写语法。

Safari ≤15.3（尤其是 iOS 15.4 之前）对 CSS Grid 的部分语法不解析，不是“显示异常”，而是整条声明被静默丢弃——display: grid 变成 display: block，grid-template-columns 显示为空，布局直接退化为流式。

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

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

下载

为什么 Safari 开发者工具里 display 值是 block

这不是你写错了，是 Safari 内核压根没加载 Grid 解析器。常见触发点： - 用了 grid-template-areas：Safari ≤15.3 完全不识别，整条 display: grid 规则被跳过 - 写了 row-gap 或 column-gap：这些属性在旧 Safari 中静默失效，但不会报错，只是间隙消失 - 父容器只写了 display: grid 却没定义 grid-template-columns：Safari 可能按 auto 撑开轨道，导致列宽异常或高度塌陷 验证方式：打开 Safari 开发者工具 → Computed 面板 → 搜索 display，若值不是 grid；再搜 grid-template-columns，若显示 none 或空字符串，基本锁定是旧内核问题。

必须禁用 grid-template-areas 改用显式行列定位

grid-template-areas 是旧 Safari 最大雷区，一写就崩，且无法靠媒体查询“救活”。必须彻底移除，改用数字线定位： - header 跨整行第一行 → grid-column: 1 / -1; grid-row: 1; - nav 在第二行第一列 → grid-column: 1; grid-row: 2; - main 在第二行第二列 → grid-column: 2; grid-row: 2; - footer 跨整行第三行 → grid-column: 1 / -1; grid-row: 3; 关键点：-1 表示隐式最后一根线，所有支持 Grid 的旧内核都认；同时父容器必须显式定义 grid-template-columns 和 grid-template-rows，否则旧内核可能按 auto 撑开导致错位。

gap 必须用合写且顺序不能错

Safari ≤15.3 不支持 row-gap 或 column-gap 单独声明，只认 gap 合写形式： - 把 row-gap: 12px; column-gap: 16px; 全部替换为 gap: 12px 16px; - 若只写单值 gap: 12px，它会同时作用于行列间距 - 确保该声明出现在所有 row-gap/column-gap 之前（Tailwind 默认满足，但自定义 CSS 可能打乱） - 注意：父容器若设了 overflow: hidden，旧 Safari 下 gap 推挤会导致子项溢出被裁，看起来像 gap “消失”

@supports 检测容易误判，慎用单条件

@supports (display: grid) 在 Safari 15.3 中会返回 true，但它后续的 gap、fr、minmax() 全部失效，结果是“半生效”——样式块进了，但关键属性被忽略，布局错乱更难排查。 更稳妥的做法： - 组合检测：@supports (display: grid) and (gap: 0)（注意 Safari 15.4–16.3 有路径 bug，慎用于 grid-auto-flow: column 场景） - 或直接 JS 检测：CSS.supports('display', 'grid') && CSS.supports('gap', '0px')，再切换降级 class 真正麻烦的从来不是怎么写新语法，而是旧内核连“不支持”都不告诉你一声——它只沉默地把整行规则扔进黑洞。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！