autoprefixer不会自动将display: grid转为display: -ms-grid，仅当手动书写-ms-grid时才补全配套前缀；需显式声明ie11、确保插件顺序正确，并手写双版本代码以实现真正兼容。
Autoprefixer根本不会自动把display: grid转成display: -ms-grid
它不是语法降级工具，只补前缀。你写display: grid，它不会生成display: -ms-grid；你写grid-template-columns: 1fr 2fr，它也不会凭空加-ms-grid-columns。只有当你**手动写了display: -ms-grid**，它才可能对配套属性（如grid-template-columns）补-ms-前缀。
常见错误是以为配了grid: true或grid: "autoplace"就能“全自动兼容”，结果编译后 CSS 里一条-ms-都没有——因为源码没满足它的触发条件。
- 必须并行写：
display: -ms-grid; display: grid;，不能只写后者 -
browserslist里必须显式包含ie 11（"last 2 versions"默认不含 IE） - PostCSS 插件顺序要正确：
autoprefixer必须在postcss-preset-env之后，否则后者提前“现代化”掉-ms-写法，Autoprefixer 就没得处理了
哪些 Grid 语法 Autoprefixer 实际能处理？
它只覆盖极小的子集，且依赖你写的原始语法是否“可映射”。能处理的典型场景：
-
grid-template-columns: 1fr 2fr→ 可转为-ms-grid-columns: 1fr 2fr（注意：IE11 支持1fr，但minmax(0, 1fr)或auto-fit会直接跳过） -
grid-column-start: 2; grid-column-end: 4;→ 可转为-ms-grid-column: 2; -ms-grid-column-span: 2; -
grid-row-start: 1; grid-row-end: 2;→ 可转为-ms-grid-row: 1; -ms-grid-row-span: 1;
以下写法它一律不处理，也不会报错，只是静默忽略：
-
grid-area: header（IE11 完全不支持grid-template-areas） -
grid-column: 2 / -1或grid-column: span 2（负值和span关键字无法映射到正整数-ms-grid-column-span） -
grid-gap: 10px（-ms-grid-gap不存在，IE 中需用margin模拟）
为什么开了grid: true还是没生成-ms-属性？
不是配置无效，而是 Autoprefixer 根本没触发。检查这三处：
- 打开最终生成的 CSS 文件，全局搜索
-ms-grid。如果零结果，说明它连入口都没进——大概率是源码里没写display: -ms-grid - 运行
npx browserslist确认输出里真有ie 11，而不是只显示chrome 127、firefox 126等 - 检查 PostCSS 配置中
autoprefixer是否被其他插件（比如postcss-preset-env）包裹或提前执行；可临时注释掉其他插件，只留autoprefixer做最小验证
另外，如果你用了@supports (display: grid)做特性检测，注意它在 IE11 中完全无效——IE11 不识别该语法，整个块会被忽略，别指望靠它做回退逻辑。
真正要兼容 IE11，你得手写双版本，不是靠 Autoprefixer “生成”
Autoprefixer 最多帮你省掉几个-ms-前缀的拼写，但布局结构、单位选择、定位方式都得你亲手设计。例如：
- 列定义别混用
auto和fr（如auto 1fr），IE11 渲染易错位；统一用50% 50%或200px 300px - 子项不能依赖隐式轨道，总列数必须预先算死；
-ms-grid-column-span只接受正整数，span 2这种写法等于没写 -
grid-gap必须删掉，改用margin模拟间距，且要确保父容器display: -ms-grid下子项的margin不会被忽略（IE11 对-ms-grid子项的margin支持有限）
最常被忽略的一点：即使 Autoprefixer 输出了所有-ms-属性，IE11 的渲染引擎仍有硬约束——比如-ms-grid-column-span最大值受限、fr在某些系统上计算异常、静态网格线无法响应式重排。这些不是前缀问题，是底层实现缺陷，没法靠工具绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
