旧版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、iOS Safari ≤14.5、IE 全系、Android WebView ≤76 这些浏览器压根不解析 gap —— 声明被跳过，连报错都没有。
怎么实锤是浏览器不支持，而不是CSS写错了
别靠“看起来没效果”下结论，三步验证：
- 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;
}
}单写 @supports (gap: 0) 就会掉坑里，降级逻辑被跳过，布局直接错乱。
用 margin 模拟 gap 时最容易漏掉的三个声明
哪怕手写降级方案，以下三项缺一不可，否则旧 Safari 里会出滚动条、换行错位或内容截断：
-
overflow: hidden加在 Flex 容器上——Safari 对负 margin 的overflow计算有 bug -
min-width: 0加在每个子项上——防止长文本或图片撑宽破坏flex-shrink行为 -
box-sizing: border-box加在子项上——避免padding+border导致尺寸失控
min-width: 0 几乎从不被主动写，但一旦子项含长文本或图片，没它就会溢出容器、触发横向滚动。
