DevTools中gap显示灰色或带删除线、Computed面板搜gap为空或not supported、getComputedStyle返回''或'normal'，均表明浏览器不支持flex gap；需用@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测，避免Safari 14.1等伪支持陷阱。
DevTools 里 gap 显示灰色或带删除线就是不支持
这不是样式被覆盖，是浏览器 CSS 引擎压根不认识 gap 这个属性。打开 DevTools → Elements 面板，选中设置了 display: flex 的容器，如果 gap 在 Styles 面板里显示为灰色、带删除线，或标着 “invalid”，基本可断定不支持。
Computed 面板搜 gap 返回空或 not supported
切到 Computed 面板，直接搜索 gap。如果值为空字符串 ''，或明确写着 not supported，说明该浏览器未实现该属性。注意：Safari ≤14.1 对 @supports (gap: 0) 会返回 true，但实际在 Flex 容器中静默忽略——这是个伪支持陷阱，不能信。
控制台运行 getComputedStyle(el).gap 返回 '' 或 'normal'
在控制台执行：getComputedStyle(document.querySelector('.your-flex-container')).gap。返回 ''（空字符串）或 'normal'，都代表未生效。这个方法最直接，绕过所有样式层干扰，只看最终计算值。
别被 @supports (gap: 0) 欺骗，改用双条件检测
单靠 @supports (gap: 0) 判断会掉坑里，尤其在 Safari 14.1。必须组合 Grid 和 Flex 的 gap 支持特征：@supports (grid-row-gap: 0) and (row-gap: 0) 才能准确命中真正支持 Flex gap 的环境。漏掉任一条件，降级规则就可能被跳过，布局错位。
立即学习“前端免费学习笔记（深入）”；
真实兼容性边界比文档写的更脆——比如 iOS Safari 14.4 看似接近 14.5，但gap 依然静默失效；微信 X5 内核多数卡在 Android WebView 75，gap 也完全不解析。验证永远比查表格更可靠。 
