旧版safari（≤14.1）完全不解析gap属性，需用双条件@supports (grid-row-gap: 0) and (row-gap: 0)检测，并以负margin+正margin模拟间隙，同时强制设置overflow: hidden、min-width: 0、box-sizing: border-box及半分值。
旧版 Safari（≤14.1）压根不解析 gap，写了等于没写——不是渲染错位，是声明被跳过、无报错、DevTools 里灰显或值为空。必须用负 margin + 正 margin 模拟，且四项条件缺一不可。
怎么确认 gap 真的不被支持
别靠“没看到间隙”下结论，三步实锤：
- DevTools → Elements 面板选中容器，
gap声明显示为灰色或带删除线 - Computed 面板搜索
gap，返回空字符串""或标着not supported - 控制台执行
getComputedStyle(el).gap，结果是""或"normal"
排除伪失效：检查是否漏了 display: flex，拼写是否为 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 display: contents。
@supports (gap: 0) 是个陷阱，别信
Safari 14.1 会返回 true，但只在 Grid 中生效；Flex 容器里的 gap、row-gap、column-gap 全部静默忽略。
真正能避开误判的检测方式是双条件：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
@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 是最容易被漏掉的关键声明——没有它，含长文本或图片的子项会撑破容器，触发横向滚动。
用 margin 模拟 gap 的硬性条件
纯 CSS fallback 必须同时满足以下四点，否则旧 Safari 里大概率出现滚动条、换行错位或内容截断：
- Flex 容器加
overflow: hidden，否则负 margin 可能触发意外水平滚动条或截断右侧子项 - 每个子项加
min-width: 0，否则内容撑宽时破坏flex-shrink行为 - 每个子项加
box-sizing: border-box，避免padding+border导致尺寸失控 - 间隙值按半分：目标
gap: 16px→ 容器设margin-left: -8px;margin-right: -8px，子项设margin-left: 8px;margin-right: 8px - 清除首项 margin 别用
:not(:first-child)——旧版 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
为什么不用 padding 替代 margin
用容器负 margin + 子项正 padding 看似更干净，但落地时三类问题高频出现：
-
flex-wrap: wrap下，换行后首项会多出顶部/左侧 padding——得手动用:nth-child(3n+1)清除（假设每行 3 个） - 子项若有
border，padding+border易撑破容器宽度，必须配box-sizing: border-box - 子项设
display: none时，padding仍占位，视觉间隙错乱，需 JS 同步移除 class 或改用visibility: hidden+position: absolute
真正容易被忽略的是 min-width: 0：flex 子项默认 min-width: auto，加上 padding 或 margin 后极易溢出容器，尤其在响应式窄屏下。这个值几乎从不被主动写，但它决定了内容是否会被强制截断或触发意外换行——哪怕你把其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
