如何解决CSS grid-gap在旧版浏览器中的布局错位？-css教程-PHP中文网

grid-gap在旧版safari≤10.1、ie、android 4.4 webview中被解析器直接丢弃，因其是level 2属性，旧引擎仅支持level 1的grid-row-gap和grid-column-gap；ie连二者都不支持，需降级为margin+box-sizing方案。

如何解决css grid-gap在旧版浏览器中的布局错位？

旧版 Safari（≤10.1 / iOS ≤15.3）、IE、Android 4.4 内置 WebView 等浏览器根本不会解析 grid-gap，它不是“没效果”，而是被解析器直接丢弃——布局错位是必然结果，不是代码写错了。

为什么 `grid-gap` 在旧浏览器里等于没写

grid-gap 是 CSS Grid Level 2 新增的简写属性，而旧引擎只认 Level 1 的 grid-row-gap 和 grid-column-gap。Safari ≤10.1 虽支持这两个属性，但完全无视 gap；IE 则连 grid-row-gap 都不支持，display: grid 本身就被忽略。

常见现象：本地 Chrome 看着正常，一上 iPad（iOS 15.2）或内网 IE11 就所有子项紧贴堆叠，网格“塌”成单列
Autoprefixer 默认不处理 grid-gap → 即使配了 grid: true，也只展开为 grid-row-gap/grid-column-gap，不加 -webkit- 前缀
别信“加前缀就行”：-webkit-grid-gap 在 Safari 10.1 中无效，必须手写双属性

必须改用 `grid-row-gap` + `grid-column-gap`

这是兼容性最稳的纯 CSS 方案，适用于 Safari ≤10.1、Chrome ≤56、Firefox ≤51 等旧引擎。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

写法要拆开：用 grid-row-gap: 12px 和 grid-column-gap: 12px 替代 gap: 12px，不能只写其中一个
Safari 10.1 支持 grid-row-gap，但若只写 grid-row-gap 不写 grid-column-gap，列方向依然无间隙
IE11 完全不支持这两个属性 → 此时需降级到 margin 方案（见下条），grid-row-gap 在 IE 里会被静默忽略
注意单位：避免用 rem 或 em，旧引擎对相对单位在 gap 中计算不稳定，优先用 px 或 vh

IE11 或完全无 Grid 支持的环境：用 `margin` + `box-sizing`

当目标环境包含 IE11、Android 4.4 WebView 或某些老旧 Electron 版本时，grid-row-gap 无效，必须 fallback 到 margin 模拟。

所有 grid item 必须加 box-sizing: border-box，否则 margin-right 会让总宽超 100%，引发换行错乱或横向滚动条
水平间隙：用 .grid > *:not(:last-child) { margin-right: 12px; }；垂直间隙：用 .grid > *:not(:last-child) { margin-bottom: 12px; }
如果网格启用 flex-wrap 或有动态行数，:not(:last-child) 会失效（它只管 DOM 顺序，不管视觉换行）→ 此时需 JS 插入占位元素，或改用 inline-block + font-size: 0
慎用负 margin 父容器 hack（如 margin: -12px）：旧引擎中易触发渲染 bug，尤其配合 overflow: hidden 时

容易被忽略的陷阱：gap 计算会影响轨道尺寸

gap 不是“画上去的空白”，它参与容器尺寸分配——3 列 + 2 个 12px gap，实际占用宽度 = 列宽总和 + 24px。这点在旧浏览器 fallback 时极易翻车。

用 margin 模拟时，若子项用了 width: calc(33.333% - 12px)，必须把 gap 值从计算中减掉，否则会撑破容器
IE11 中 calc() 对 % 和 px 混合运算支持差，建议用固定像素列宽（如 width: 200px）或百分比整除（width: 33.33%）
小屏下多个 gap 累加吃掉大量空间 → 建议媒体查询中将 gap 从 16px 降到 8px，避免 min-width 子项被挤出网格