safari ≤14.1等旧浏览器不解析flex容器的gap属性，需通过devtools灰显、computed为空、getcomputedstyle返回""或"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、Android WebView ≤76 这些内核压根不解析 gap —— 声明被跳过，连报错都没有。
怎么实锤确认是浏览器不支持，而不是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 是个伪支持陷阱
Safari 14.1 对 @supports (gap: 0) 返回 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;
}
}
单写 @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 —— 它几乎从不被主动写，但一旦子项含长文本或图片，没它就会溢出容器、触发横向滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
