旧版 safari ≤14.1 不解析 gap 属性，需三步实锤：devtools 中 gap 灰显或带删除线、computed 面板值为空或 not supported、getcomputedstyle(el).gap 返回 "" 或 "normal"；@supports (gap: 0) 存在伪支持陷阱，应改用 @supports (grid-row-gap: 0) and (row-gap: 0) 双条件检测，并配合 overflow: hidden、min-width: 0、box-sizing: border-box 三项降级声明。
旧版 Safari（≤14.1）根本不解析 gap，不是“不生效”，而是声明被跳过、无报错、DevTools 里灰显或值为空——必须用降级方案，不能靠加前缀或 @supports (gap: 0) 安全兜底。
怎么实锤确认是 Safari ≤14.1 导致 gap 失效
别凭“没看到间隙”下结论，三步验证缺一不可：
- DevTools → Elements 面板选中容器，
gap声明显示为灰色或带删除线 - Computed 面板搜索
gap，返回空字符串""或标着not supported - 控制台执行
getComputedStyle(el).gap，结果是""或"normal"
排除伪失效：检查是否漏了 display: flex / display: grid，拼写是否为 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 display: contents。
@supports (gap: 0) 在 Safari 14.1 是个坑
它返回 true，但只在 Grid 中生效；Flex 容器里的 gap、row-gap、column-gap 全部静默忽略。真正能避开这个陷阱的检测写法是：
@supports (grid-row-gap: 0) and (row-gap: 0) {
.flex-container { gap: 16px; }
}
@supports not ((grid-row-gap: 0) and (row-gap: 0)) {
.flex-container {
margin-left: -8px;
margin-right: -8px;
overflow: hidden;
}
.flex-container > * {
margin-left: 8px;
margin-right: 8px;
min-width: 0;
box-sizing: border-box;
}
}
注意：min-width: 0 是最容易被漏掉的关键声明——没有它，含长文本或图片的子项会撑破容器，触发横向滚动。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
Flex 场景下用 margin 模拟 gap 的硬性条件
纯 CSS fallback 必须同时满足以下四点，否则旧 Safari 里大概率出现滚动条、换行错位或内容截断：
-
overflow: hidden加在 Flex 容器上——Safari 对负 margin 的 overflow 计算有 bug - 每个子项加
min-width: 0——防止内容撑宽破坏flex-shrink行为 - 每个子项加
box-sizing: border-box——避免padding+border导致尺寸失控 - 间隙值均分：容器设
margin-left: -8px; margin-right: -8px，子项设padding-left: 8px; padding-right: 8px（对应gap: 16px）
如果子项本身有 border 或 padding，要在 margin/padding 值里预留空间，否则视觉间隙不准。
Grid 场景下别用 grid-gap，改用拆开的 row-gap/column-gap
grid-gap 是 Level 2 属性，Safari ≤10.1、IE、Android 4.4 WebView 等直接丢弃。兼容性最稳的写法是显式拆开：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 12px;
grid-column-gap: 12px;
}
必须两个都写，只写 grid-row-gap 不写 grid-column-gap，列方向依然无间隙。Autoprefixer 默认不处理 grid-gap，需显式配置 grid: true 且源码里写 gap: 12px 才会补全为双属性。
真正容易被忽略的是：当 grid-template-columns 写死像素（如 500px 500px），浏览器优先保证列宽，gap 可能被压成 0；得改成 1fr 1fr 或 minmax(0, 1fr) 1fr 给间隙留出生效余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
