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 显示为空，布局直接退化为流式。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
为什么 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
真正麻烦的从来不是怎么写新语法，而是旧内核连“不支持”都不告诉你一声——它只沉默地把整行规则扔进黑洞。 
