IE10/11 的 CSS Grid 兼容需写两套独立布局：display: grid 与 display: -ms-grid 硬编码坐标，grid-template-areas 被静默丢弃，Autoprefixer 不处理该语法，@supports 在 IE 中完全无效，必须用类名分离或条件加载实现降级。
IE10/11 的 CSS Grid 兼容不是“加个前缀就能跑”，而是必须写两套完全独立的布局逻辑：一套用 display: grid，另一套用 display: -ms-grid 硬编码坐标。Autoprefixer 不会、也不能帮你把 grid-template-areas 转成 -ms-grid-column，它只在你 already 写了 -ms-grid 的前提下补个别属性。
为什么 grid-template-areas 在 IE11 里直接失效
这不是“部分不支持”，是整条声明被浏览器静默丢弃——开发者工具里该属性显示为灰色划掉，控制台无任何提示。哪怕只写一次 grid-template-areas: "header nav"，IE11 就连带忽略所有后续 grid-area 命名和依赖它的定位规则。Autoprefixer 完全不处理这个语法，因为它和 -ms-grid 没有映射关系：前者是 2017 年标准，后者是微软 2011 年草案，两套系统互不兼容。
实操建议：
- 删掉全部
grid-template-areas声明，哪怕只用一次，老 Safari（≤10.1）也可能让整个display: grid块退化为block - 改用
grid-row/grid-column显式定位，例如用grid-row: 1 / 3替代grid-area: header - 避免
grid-column: 2 / -1这类负值终点；IE11 和旧版 Safari 不识别，需手动换算总列数并写死grid-column-end
display: -ms-grid 必须手写轨道与坐标
IE10/11 不支持自动布局，grid-auto-flow、grid-template-areas、甚至 fr 单位都不可靠。IE11 解析 1fr 2fr 时可能把第二项当 0，必须退化为百分比或像素值。而且 -ms-grid-column-span 不支持 span 2 语法，只能写具体数字，也不支持 -ms-grid-row-span。
实操建议：
- 容器先声明
display: -ms-grid，再用-ms-grid-columns和-ms-grid-rows显式定义轨道（推荐用auto或像素值，慎用fr） - 每个子项单独设置
-ms-grid-row、-ms-grid-column、-ms-grid-column-span - 对齐不要依赖
-ms-grid-row-align（支持极差），稳妥起见用margin: auto或text-align: center - 不要在同一个选择器里混写
display: grid和display: -ms-grid，IE 会忽略后者
@supports (display: grid) 在 IE 中根本不起作用
IE 完全不解析 @supports at-rule，既不执行也不 fallback。你以为写了 @supports not (display: grid) { ... } 就能兜底，其实这段 CSS 在 IE 里被整块跳过，啥都不会生效。真正的降级必须靠独立的选择器或条件加载。
实操建议：
- 放弃用
@supports做 IE 兜底，改用独立类名，比如.grid-container+.ms-grid-container分开写样式 - 确保父容器显式写了
display: grid（仅写grid-template-columns是无效的，现代浏览器也一样） - IE11 不支持
gap，改用margin模拟，但注意box-sizing影响子项宽度计算 - 如果项目必须支持 IE10/11，就别用
gap、grid-area、auto-placement这些特性——它们在 IE 里没有等价物
最常被忽略的一点：IE10/11 的 -ms-grid 布局不是“兼容模式”，它是另一套需要单独维护的硬编码方案。你写的每一条 grid-row 都得对应一条 -ms-grid-row，且坐标从 1 开始、不能用 span 语法、fr 单位要换算……这些细节一旦漏掉一个，IE 里就是白屏或错位，而且毫无报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
