IE11的Grid语法基于2014年旧草案（display: -ms-grid），不支持grid-template-areas、grid-gap、grid-auto-flow: dense及fr单位需写为-ms-grid-columns: 1fr，Autoprefixer仅在明确配置ie 11且CSS属有限子集时生成对应前缀，不转换语法或处理负值/隐式轨道。
IE11的Grid语法和现代标准到底差在哪
IE11确实支持CSS Grid，但用的是2014年旧草案（display: -ms-grid），和现在display: grid完全不是一回事。它不识别grid-template-areas、grid-gap、grid-auto-flow: dense这些属性，连fr单位都要写成-ms-grid-columns: 1fr 2fr。Autoprefixer能补的只是前缀，不是语法转换——这点必须先认清。
Autoprefixer对IE11 Grid的支持边界在哪
Autoprefixer只在满足两个条件时才生成MS Grid代码：目标浏览器明确包含IE11，且你写的CSS是它能映射的有限子集。它能处理：
-
display: grid→display: -ms-grid -
grid-column/grid-row→-ms-grid-column/-ms-grid-row -
grid-column-start等单侧属性 → 对应-ms-grid-column-align类（仅部分） -
grid-template-columns→-ms-grid-columns（但仅支持长度、auto、1fr等极简写法）
它不会处理grid-area、justify-items、任何gap相关属性，也不会把grid-template-areas转成-ms-grid-row/column的硬编码布局。
配置Autoprefixer让IE11 Grid真正生效的关键点
光装插件没用，必须手动配好Browserslist和Autoprefixer选项：
- 在
package.json或.browserslistrc中明确写ie 11，不能只写last 2 versions（它会忽略IE11） - 确保PostCSS配置里Autoprefixer的
grid选项设为true：autoprefixer({ grid: true }) - 写CSS时避开IE11不支持的语法：不用
grid-gap，改用margin；不用grid-template-areas，改用grid-column/grid-row显式定位 - 测试时打开IE11开发者工具，看计算样式里是否出现
-ms-grid-系列属性，而不是只盯着原始CSS
为什么写了grid-column: 1 / -1却没生成-ms-grid-column-span
这是最常踩的坑：IE11的-ms-grid-column-span只接受正整数，不支持负值或span关键字。Autoprefixer遇到1 / -1或span 2会直接放弃生成MS前缀，留下空白。正确写法是换算成具体列数：
/* ❌ 不会生成-ms前缀 */
.item { grid-column: 1 / -1; }
<p>/<em> ✅ 手动写死跨度，Autoprefixer才能转 </em>/
.item { grid-column: 1 / 5; } /<em> 假设总列数是4 </em>/</p>
更麻烦的是，IE11的-ms-grid是静态网格，没有隐式轨道概念——所有列/行都得预先在父容器用-ms-grid-columns/-ms-grid-rows定义好，否则子项定位会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
