Autoprefixer不会将display: grid转为display: -ms-grid，因其仅补前缀而非降级语法；IE10/11需手动双写display: -ms-grid和display: grid并确保顺序正确，且所有-ms-grid属性须显式声明。
Autoprefixer根本不会把display: grid转成display: -ms-grid
这是最常被误解的一点：Autoprefixer 是前缀补全工具，不是语法降级器。它看到 display: grid 不会生成 display: -ms-grid；只有你**手动写了 display: -ms-grid**，它才可能帮你补 -ms-grid-columns 或 -ms-grid-rows。IE10/11 连 display: grid 都不解析——整条声明被浏览器直接忽略，不是“没生效”，是“不认识”。
必须手动双写容器样式，且顺序不能错
IE11 的 -ms-grid 是静态网格，所有布局信息都得显式声明。源码中必须这样写：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
-
display: -ms-grid必须在前，否则 Autoprefixer 不触发映射逻辑 -
fr单位虽在 IE11 中能解析，但混用auto和fr（如auto 1fr）易导致渲染错位，建议统一用%或固定值（如50% 50%） - 若用了
grid-gap，Autoprefixer 默认不输出-webkit-grid-gap或-ms-grid-gap（后者根本不存在），得靠margin模拟
子项定位不能用复合语法，得拆成单侧属性
IE11 的 -ms-grid 不支持 grid-column: 2 / 4、grid-column: span 2 或负索引（如 grid-column: 1 / -1）。Autoprefixer 遇到这些直接跳过，不生成任何对应属性。
正确写法是手动拆解：
立即学习“前端免费学习笔记（深入）”；
.item {
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column-start: 2;
grid-column-end: 4;
}
-
-ms-grid-column-span只接受正整数，不识别span关键字 -
grid-area: header无法映射——IE11 完全不支持grid-template-areas，必须放弃区域命名，改用行列坐标 - 总列数必须预先算死，不能依赖隐式轨道或
auto-fit
验证是否真起作用，别只看配置文件
很多项目配了 grid: true 或 grid: "autoplace"，但构建产物里一条 -ms- 都没有。关键要查三处：
- 运行
npx browserslist，确认输出包含ie 11（"last 2 versions"不含 IE） - 检查最终生成的 CSS 文件，搜索
-ms-grid-columns—— 没出现说明 Autoprefixer 根本没处理这条规则 - 在 IE11 开发者工具的“计算样式”里看
display值，要是显示block或空，说明display: -ms-grid没生效（可能是被其他规则覆盖，或父级未声明）
真正容易被忽略的是：即使 Autoprefixer 输出了所有 -ms- 属性，IE11 渲染引擎仍有硬约束——比如 -ms-grid-column-span 超出定义列数时会崩溃，或 minmax()、fit-content() 这类函数完全不识别。这些没法靠工具兜底，只能靠手写时提前规避。
