gap在旧版浏览器不生效是因safari≤14.1等内核根本不解析该属性；须通过devtools灰显、computed为空、getcomputedstyle返回""或"normal"三步实锤，并用@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测，配合overflow: hidden、min-width: 0、box-sizing: border-box三项降级声明。
gap 在旧版浏览器中不生效，不是你写错了，是 Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76、IE 全系这些内核压根不解析它——声明被跳过，连报错都没有。
怎么实锤确认是浏览器不支持，而不是CSS写错了
别靠“看起来没效果”下结论，三步验证：
- DevTools → Elements 面板选中容器，看
gap是否灰显或带删除线 - Computed 面板搜索
gap，值为空字符串""或标着not supported - 控制台运行
getComputedStyle(el).gap，返回""或"normal"
排除伪失效：检查是否漏了 display: flex（不是 inline-flex），有没有拼错成 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 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——它几乎从不被主动写，但一旦子项含长文本或图片，没它就会溢出容器、触发横向滚动。
flex-wrap 场景下 margin 方案失效怎么办
水平 flex-wrap: wrap 时，margin-right 会导致换行后首项左侧多出一倍间隙；纯 CSS 很难精准清除每行末项。
这时有两个更可靠的选择：
- 改用
display: inline-block+font-size: 0消除空白符，再对子项设vertical-align: top和margin——兼容性极好，但失去 Flex 的对齐能力 - 轻量 JS 补齐：遍历容器子项，用
getBoundingClientRect()判断换行位置，在每行末尾后插入占位<div class="gap-filler"></div>，并监听resize
如果项目已用 PostCSS，直接上 flex-gap-polyfill 插件，构建时自动转成带 calc() 和 CSS 变量的兼容代码，零运行时开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
