Safari 14.0及更早版本不支持gap简写属性，需改用row-gap和column-gap独立声明；IE全系和Android WebView≤75也不支持，降级须用margin配合:nth-child清除末项。
gap 在 Safari 14.0 及更早版本中静默失效
写了 gap: 12px 却没间距？不是 CSS 没加载，是 Safari 14.0（对应 iOS 14.0–14.4）压根不解析这个简写属性——它只认 row-gap 和 column-gap 两个独立声明。DevTools 的 Computed 面板里搜 gap 会返回空值，但换成 row-gap 就能看见值。
- 必须分开写：
row-gap: 12px; column-gap: 12px;，不能混用gap: 12px和row-gap -
-webkit-gap在 Safari 14.0 中也无效，别白加前缀 - iOS 14.0–14.4 覆盖约 3% 存量用户（截至 2026 年 10 月），真机测试不可跳过
IE 全系和 Android WebView ≤75 必须放弃 gap
IE 不支持 gap、grid-row-gap、grid-column-gap 任何一种写法；Android WebView ≤75 同样直接丢弃声明，连报错都不会有。这类环境里，getComputedStyle(el).gap 返回空字符串，@supports (gap: 0) 检测也会误判。
- 降级方案只能用
margin：给子项加margin-right/margin-bottom，再用:nth-child()清除末项 - 所有子项必须设
box-sizing: border-box，否则margin会让总宽超 100%，触发意外换行或滚动条 - Grid 布局中若用了
grid-template-columns: 500px 500px这类固定列宽，margin降级后可能撑破容器——改用1fr 1fr或minmax(0, 1fr)留出间隙空间
@supports 检测 gap 支持要绕开“半支持”陷阱
只写 @supports (display: grid) 会把 Safari 14.0 这类“能解析 grid 但不认 gap”的浏览器也放进现代分支，结果布局碎裂。它认 display: grid，但 gap 被静默忽略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 检测要更具体：
@supports (display: grid) and (row-gap: 0)比@supports (gap: 0)更可靠 - 降级样式（如
display: flex+margin）必须写在@supports外层，现代写法包在里面 - 别依赖 Autoprefixer 自动补
grid-row-gap：需显式配置grid: true，且源码里必须先写gap才会触发转换
横向滚动卡片中 gap 的兼容底线
横向滚动本质是 flex-wrap: nowrap 的单行 Flex 布局，gap 在 Chrome 84+、Firefox 63+、Safari 14.1+ 中可用；但 Safari 14.0 及更早版本仍会静默忽略，卡片紧贴无间距。
- 必须兼容旧 Safari？放弃
gap，改用margin-right: 12px+:last-child { margin-right: 0 } - 绝对不要混用：
gap: 12px和子项margin-right: 8px同时存在，会导致间距叠加且末项无法清除 - 首尾留白靠容器
padding-inline: 12px实现，和 gap 值对齐，避免视觉割裂
真正容易被忽略的是：gap 的生效前提（Flex/Grid 容器）、浏览器实际支持粒度（不是“支持 Grid”就等于“支持 gap”）、以及降级时 margin 的清除逻辑是否覆盖所有断点。写完别只看桌面 Chrome，真机连 iOS 14.4 测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
