老浏览器不识别gap属性，Safari≤14.1等版本CSS引擎直接跳过该声明；@supports(gap:0)在Safari14.1中误报true，需用@supports(grid-row-gap:0)and(row-gap:0)双条件检测；Safari9–13.1需display:-webkit-flex前缀；手动模拟gap时须设min-width:0、box-sizing:border-box和flex-shrink:0防布局崩坏。
老浏览器压根不解析gap这个属性名
不是“支持不好”，是CSS引擎根本不认识gap。Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Chrome <84、Firefox <63，这些版本的渲染引擎在解析样式时直接跳过gap声明——Styles面板里显示灰色或带删除线，getComputedStyle(el).gap返回''或'normal'，就是最直接的证据。
@supports (gap: 0)在Safari 14.1里会骗人
这个检测不可靠：Safari 14.1 的@supports (gap: 0)返回true，但实际在display: flex容器中仍忽略gap，换行时子项错位甚至塌陷。必须用双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)，才能真实反映Flex下gap是否可用。
Flex容器没加-webkit-flex前缀就等于没写
Safari 9–13.1 只认旧草案语法：display: flex会被完全忽略，整个容器退化成普通块级元素，后续所有justify-content、gap都标为invalid。必须显式写display: -webkit-flex才能触发Flex计算引擎。Autoprefixer默认不补这个前缀，除非browserslist明确包含safari >= 9或ios_saf >= 9。
手动模拟gap时最容易漏掉min-width: 0
负margin + padding方案（如容器margin-left: -8px、子项padding-left: 8px）看似简单，但子项默认min-width: auto，内容稍长就会撑破容器；加上padding后更易溢出。这个值几乎从不被主动写，却是在旧Safari/Chrome 83等环境里布局崩坏的头号原因。同理，box-sizing: border-box和flex-shrink: 0也必须显式声明，否则视觉间隙不准、文字被“吃掉”。
立即学习“前端免费学习笔记（深入）”；
