怎样为旧版IE提供CSS Grid降级方案-css教程-PHP中文网

ie11不支持display: grid，必须用display: -ms-grid并前置，配合-ms-grid-columns等私有属性手动定位；@supports无效，fallback需写在外层；gap需用margin模拟，autoprefixer v9+已停止生成-ms-grid。

怎样为旧版ie提供css grid降级方案

IE11根本不认`display: grid`，必须手写`-ms-grid`

IE11 不是“漏前缀”，而是整条 display: grid 规则被静默丢弃——连带所有 grid-template-columns、grid-column 都失效。你写的现代 Grid 代码在 IE11 里等于没写。

必须显式声明：display: -ms-grid 作为 IE11 唯一入口，并且它得写在 display: grid **前面**，否则 IE11 直接跳过私有声明。

grid-template-columns: 1fr 2fr 1fr → 改为 -ms-grid-columns: 1fr 2fr 1fr（但注意：IE11 对 fr 支持不稳定，混用 auto 和 fr 易错位；生产环境建议用 50% 50% 或 200px 300px）
grid-column: 1 / -1 → IE11 完全忽略，必须拆成 -ms-grid-column: 1 + -ms-grid-column-span: 3（总列数为 3 时）
子项必须**每个都手动定位**，IE11 没有隐式轨道、不支持 grid-area 名称或负索引

`@supports` 在 IE 中完全无效，降级样式必须写在外层

@supports (display: grid) 这个规则本身就不被 IE11 解析，整段会被跳过，既不执行也不报错。你不能靠它给 IE 写 fallback。

真正能生效的写法是：把兼容 IE 的样式（比如 display: -ms-grid + float + margin）直接写在 @supports 块**外面**；现代 Grid 样式包在里面。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

错误示例：
```
@supports (display: grid) { .grid { display: grid; } } .grid { display: -ms-grid; }
```
→ IE11 看不到 .grid 外层规则？不，它能看到，但如果你外层用了 gap 或 grid-column: span 2 这类它不认识的语法，照样失效
正确结构：外层用 IE 可解析的语法（display: -ms-grid、float、margin），内层 @supports 里只放现代 Grid 声明
检测推荐用 @supports (display: grid) and (grid-template-columns: 1fr)，比单测 display: grid 更准，能筛掉 Safari 10.1 这类“半支持”环境

`gap` 在 IE 全系和旧 Safari 中被直接丢弃，只能用`margin`模拟

gap 是 Level 2 属性，IE 全系、Safari ≤14.0、Android WebView ≤75 等浏览器压根不解析它——DevTools 里显示为灰色或删除线，getComputedStyle(el).gap 返回空字符串。

grid-row-gap 和 grid-column-gap 是 Level 1 属性，兼容性好些，但 IE11 连这两个都不支持，所以最终 fallback 只能靠 margin。

所有 grid item 必须加 box-sizing: border-box，否则 margin-right 会让实际宽度超 100%，导致换行或滚动条
横向间隙用 margin-right，但最后一列要清除：.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列）
grid-template-columns 别写死像素（如 500px 500px），否则 gap 没空间可分配；改用 1fr 1fr 或 minmax(0, 1fr) 1fr 给 margin 留出生效余地

Autoprefixer v9+ 已彻底移除`-ms-grid`转换能力

即使你在 postcss.config.js 里写了 autoprefixer({ grid: true })，v9 及之后版本也不会生成任何 -ms- 属性。它从 2021 年起就主动放弃这事了。

v8.x 版本虽保留该选项，但实测常漏定义、错转为无效 margin，调试成本远高于手写。Autoprefixer 只做前缀补全，不是语义重写器——它看到 display: -ms-grid 才可能补 -ms-grid-columns，看到 display: grid 就当现代语法处理。

检查最终生成的 CSS 文件，搜索 -ms-grid —— 如果没出现，说明 Autoprefixer 根本没触发，问题不在配置，而在源码没满足它的输入条件
别信“配了 grid: true 就自动兼容”的说法，那是过时认知
如果项目仍需支持 IE11，建议把 -ms-grid 逻辑单独维护，或用 postcss-grid-kiss（但注意：它的 @supports fallback 在 IE 中同样被忽略，需配合 JS 检测）

最麻烦的不是写两套样式，而是 IE11 的 -ms-grid 引擎有硬约束：它不支持动态计算、不兼容 fr 混合单位、无法响应式重排，所有行列索引都得手动换算。一旦网格结构稍复杂，错一位就全乱。