如何兼容IE 11中的CSS Grid布局？

IE11不支持display: grid，必须显式写display: -ms-grid并手动设置-ms-grid-column/-row等属性；Autoprefixer v9+已移除IE Grid降级，仅补前缀不改结构，且browserslist需明确包含ie 11。

IE11 不支持 display: grid，写了等于没写；它只认 display: -ms-grid，且必须手动为每个子项指定行列位置，grid-template-areas、gap、fr（部分场景下）、负索引等全部无效。

为什么 autoprefixer 没生成 -ms-grid 代码？

Autoprefixer 不是语法转换器，它不会把 display: grid 自动改成 display: -ms-grid。v9+ 版本已彻底移除对 IE Grid 的降级支持——它只补前缀，不改结构。

1. 你必须在源码里**显式写出** display: -ms-grid，Autoprefixer 才可能对其配套属性（如 grid-template-columns）补上 -ms- 前缀
2. browserslist 配置中必须明确包含 ie 11，仅写 last 2 versions 会被忽略
3. 如果用了 grid-area: header 或 grid-column: 2 / -1，Autoprefixer 直接跳过整条规则，不报错也不输出

怎么手写才能让 IE11 正确渲染？

核心原则：先写 IE 能懂的，再兜底现代语法；所有子项位置必须拆解为整数索引。

1. 容器声明顺序必须是：display: -ms-grid; display: grid;（-ms- 在前，否则 IE11 忽略整条）
2. grid-template-columns: 1fr 2fr → 改成 -ms-grid-columns: 1fr 2fr，但生产环境建议用 33.33% 66.66%，因 IE11 对 fr 渲染不稳定
3. grid-column: 2 / 4 → 拆成 -ms-grid-column: 2; -ms-grid-column-span: 2（span 只接受正整数，不认 span 2 或负值）
4. 每个子项都得单独定位：-ms-grid-row 和 -ms-grid-column 缺一不可，不能依赖隐式轨道

为什么 @supports (display: grid) 在 IE11 中失效？

@supports 这个 at-rule 本身 IE11 就不认识，整块 CSS 会被静默跳过，既不执行也不报错。你放里面的 fallback 样式根本不会生效。

1. 真正能用于 IE10/11 的 CSS 检测只有媒体查询：@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
2. 更可靠的方式是 JS 检测：'grid' in document.documentElement.style，然后动态加类名控制布局切换
3. 所有降级样式（比如 float 或 flex 方案）必须写在 @supports 块**外面**，否则 IE11 和 Safari 9 都看不到

最常被忽略的是：IE11 下 -ms-grid 容器若没配 position: relative，里面用 position: absolute 的元素会脱离容器定位——这不是 Grid 问题，是 containing block 缺失，但容易误判为 Grid 兼容失败。