ie11不支持display: grid，仅识别display: -ms-grid；autoprefixer不是语法转换器，只对已含-ms-grid的源码补前缀，需手动降级并显式声明-ms-grid-column/-ms-grid-row等属性。
IE11 的 display: grid 根本不生效，不是漏写了前缀，是语法层面不兼容——它只认 display: -ms-grid，且所有子项必须用 -ms-grid-column、-ms-grid-row 显式定位。Autoprefixer 不会“把现代 Grid 代码自动转成 IE 可跑的代码”，它只在你写对源码的前提下补前缀。
为什么 Autoprefixer 配了 grid: true 却没生成 -ms-grid- 属性
Autoprefixer 只对已含 display: -ms-grid 的规则做前缀补全，不会凭空把 display: grid 改成 -ms-grid。它不是语法转换器，而是前缀“翻译官”。常见失效场景包括：
- 源码里写的是
display: grid，没并行声明display: -ms-grid -
browserslist没显式包含ie 11（只写last 2 versions会被忽略） - PostCSS 插件顺序错误：
postcss-preset-env在autoprefixer前运行，把旧语法提前转成了现代写法，导致 Autoprefixer 看不到可处理的目标 - 用了 IE11 完全不支持的语法，比如
grid-template-areas、grid-gap、grid-auto-flow: dense，Autoprefixer 直接跳过整条规则
怎样写出 Autoprefixer 能正确处理的 Grid 源码
必须手动降级源码结构，让 Autoprefixer 有据可依。关键点是：父容器先声明 display: -ms-grid，再写现代语法兜底；子项用单侧属性（如 grid-column-start），避开复合值和负索引。
- 父容器写法：
display: -ms-grid; display: grid;，不能只写后者 - 列定义用
grid-template-columns: 1fr 2fr→ Autoprefixer 才能转成-ms-grid-columns: 1fr 2fr（注意：IE11 实际支持1fr写法，但不支持minmax(0, 1fr)或auto-fit） - 子项定位必须拆开：
grid-column-start: 2; grid-column-end: 4;，而不是grid-column: 2 / 4或grid-column: 2 / -1（-1会被忽略） - 避免
grid-area：它无法被映射为-ms-grid-row/-ms-grid-column组合，得手动拆解
IE11 中 -ms-grid 的硬约束有哪些
即使 Autoprefixer 输出了前缀，IE11 运行时仍会因底层限制报错或错位。最常被忽略的三点是：
-
-ms-grid-column-span和-ms-grid-row-span只接受正整数，不识别span 2或负值；总列数必须预先算死，不能依赖隐式轨道 -
fr单位虽能出现在-ms-grid-columns中，但若混用auto和fr（如auto 1fr），IE11 渲染可能异常，建议统一用百分比或固定值 -
@supports (display: grid)在 IE11 中完全无效，无法用于条件加载；真要分流，得靠 JS 特性检测或构建时条件编译，不能依赖 CSS 原生机制
真正卡住项目的往往不是 Autoprefixer 配置，而是误以为它能自动兜底二维布局逻辑——它只管“加前缀”，不管“改模型”。IE11 的 -ms-grid 是静态网格，没有自动行、没有区域命名、没有 gap 概念，这些都得靠手写 margin、硬编码行列数、放弃语义化布局来换兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
