gap在旧版safari、ie等浏览器中完全不解析，需通过devtools灰显、computed值为空、getcomputedstyle返回""或"normal"三步实锤；@supports (gap: 0)有陷阱，应改用@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测，并用margin模拟时务必加overflow: hidden、min-width: 0和box-sizing: border-box。
gap 在 Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Android WebView ≤76 中根本不会被解析——写了等于没写，不报错、不警告、DevTools 里直接灰显或标 not supported。
怎么确认是浏览器不支持，而不是你写错了
别靠“没看到间隙”下结论，三步实锤：
- DevTools → Elements 面板选中容器，
gap声明是否灰显或带删除线 - Computed 面板搜索
gap，值为空字符串""或标着not supported - 控制台运行
getComputedStyle(el).gap，返回""或"normal"
排除伪失效：确认父容器有 display: flex（不是 inline-flex），没拼错成 gab，单位不缺失（如 gap: 12px 而非 gap: 12），子项没用 display: contents 破坏盒模型。
@supports (gap: 0) 是个伪支持陷阱，必须绕开
Safari 14.1 对 @supports (gap: 0) 返回 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 几乎从不被主动写，但它能防止长文本或图片撑宽子项，导致横向滚动或换行错位。
用 margin 模拟 gap 时最容易漏掉的三个声明
哪怕手写降级方案，以下三项缺一不可，否则旧 Safari 里会出滚动条、换行错位或内容截断：
-
overflow: hidden加在 Flex 容器上——Safari 对负 margin 的 overflow 计算有 bug -
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)，改用 :nth-child(n+2)
:not(:first-child) 在 iOS Safari 13.x 和 Android WebView 75 中不被支持，会导致首项仍带 margin，左侧多出空白。
正确写法是：
.flex-container > * {
margin-left: 8px;
}
.flex-container > *:nth-child(n+2) {
margin-left: 8px;
}
.flex-container > *:nth-child(1) {
margin-left: 0;
}
如果启用 flex-wrap: wrap 且每行固定数量（如 3 个），还要额外处理换行后首项：用 :nth-child(3n+1) 清除每行第一个子项的 margin-left。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
