Gap在Safari 14.1前完全不支持，@supports (gap: 0)是唯一可靠检测方式，但需用(grid-row-gap: 0) and (row-gap: 0)避开Safari 14.1伪支持陷阱，降级推荐margin+overflow: hidden方案。
Gap属性在Safari 14.1之前完全不支持，别指望autoprefixer自动修复
Autoprefixer只处理前缀，而gap在旧版Safari（尤其是iOS 14.4及更早、macOS Big Sur 11.2之前的Safari 14.0/14.1）压根没有实现——不是加-webkit-前缀就能用的问题，是根本无解析。直接写gap: 1rem会导致Flex/Grid容器内子项紧贴排列，布局彻底错乱。
常见错误现象：display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 在Safari 14.0下等价于gap: 0，三列内容横向挤在一起，没间距。
实操建议：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须检测浏览器是否支持
gap，不能靠UA字符串判断（不可靠且维护成本高） - 用
@supports (gap: 0)做特性检测，这是最干净、标准的做法 - 把
gap逻辑全部包裹进@supports块中，外部提供降级方案
@supports (gap: 0) 写法要避开Safari 14.1的“伪支持”陷阱
Safari 14.1是个特例：它声明支持gap，但只支持Grid中的gap，不支持Flex中的gap，而且对row-gap/column-gap解析不稳定。直接写@supports (gap: 0)会误判为“支持”，导致Flex布局降级失效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 如果只用Grid，
@supports (gap: 0)足够安全 - 如果同时用Grid和Flex，改用
@supports (grid-row-gap: 0) and (row-gap: 0)双条件——Safari 14.1支持grid-row-gap但不支持row-gap，这样能排除它 - 避免单独依赖
row-gap或column-gap检测，它们在旧Safari中可能被忽略而不报错
用Margin模拟Gap时，必须配合父容器overflow: hidden防溢出
用margin模拟gap最常用的是“负边距父容器 + 正边距子项”模式，例如给Grid子项加margin: 0.5rem，再给容器加margin: -0.5rem。但Safari旧版本对overflow计算有bug：即使容器设了width: 100%，负边距仍可能导致水平滚动条意外出现，或子项被截断。
实操建议：
- 所有采用margin降级的容器，必须显式声明
overflow: hidden - 不要用
padding替代margin来模拟gap——padding无法解决子项之间间距问题，且会改变盒模型尺寸 - 对Flex容器，优先用
margin-right+:last-child { margin-right: 0 }，比负边距更可控 - Grid场景下，若列数固定（如3列），可用
nth-child(3n) { margin-right: 0 }配合margin-left，避免负边距
媒体查询不是兜底方案，@supports才是生产环境唯一可靠路径
有人试图用@media not all and (min-width: 9999px)这类hack模拟“仅Safari”，或查userAgent注入class——这些在现代构建流程里极易失效：服务端渲染时UA不可知、CDN缓存混淆、iOS UA字符串随版本频繁变动。媒体查询本质是响应式工具，不是浏览器能力开关。
实操建议：
- 删掉所有基于
@media或JS UA检测的gap降级代码，统一收口到@supports - 构建时不用额外插件，CSS原生
@supports在Safari 10.1+就已支持，覆盖所有需兼容的旧版 - 如果项目用了CSS-in-JS（如Emotion、Styled Components），确保它支持
@supports嵌套输出，否则需手动拼接字符串或拆成两套样式
真正麻烦的不是写几行降级代码，而是团队里有人在新组件里随手写了gap却忘了包@supports——线上一出问题，得靠视觉回归测试或真机巡检才能发现。这个检查点，没法靠工具完全堵住。
