IE11不支持display: grid，仅识别display: -ms-grid；Autoprefixer v9+已移除IE Grid转换能力，仅在手动声明-ms-grid前提下补全极少数配套属性，无法自动降级或处理grid-gap、grid-template-areas、负值跨度等。
IE11 的 display: grid 完全无效，它只认 display: -ms-grid；Autoprefixer 从 v9 开始已移除对 IE Grid 的语法转换能力，现在它只在你**手动写了 -ms-grid 基础上**补几个配套属性，不会“自动降级”或“生成缺失声明”。
为什么写了 grid-template-columns 却没出现 -ms-grid-columns
Autoprefixer 不会凭空把现代 Grid 语法转成 IE11 可用的 -ms- 形式。它只做“前缀补全”，不做“语法重写”。前提是你必须显式写出 display: -ms-grid，否则整个转换链就断了。
- ❌ 错误写法（Autoprefixer 无视）：
.grid { display: grid; grid-template-columns: 1fr 2fr; } - ✅ 正确写法（Autoprefixer 才会处理）：
.grid { display: -ms-grid; display: grid; grid-template-columns: 1fr 2fr; } - 即使配置了
autoprefixer({ grid: true })，v10+ 版本也不会为grid-gap、grid-template-areas、grid-auto-flow生成任何-ms-属性
grid-column: 1 / -1 在 IE11 中彻底失效
IE11 的 -ms-grid-column-span 只接受正整数，不支持负值、span 关键字或隐式轨道计算。Autoprefixer 遇到这类写法直接跳过，不生成任何 -ms- 对应属性，结果就是元素默认落在第 1 列第 1 行，布局全乱。
- ❌ 不会生成前缀：
grid-column: 1 / -1;、grid-column: span 3; - ✅ 必须手动换算列数：
grid-column: 1 / 4;（假设-ms-grid-columns定义了 3 列） - 注意：
-ms-grid是静态网格，没有自动定位能力，每个子项都得靠-ms-grid-column和-ms-grid-row显式指定位置
如何验证 Autoprefixer 是否真起了作用
别只看源码写了什么，要查编译后 CSS 文件里有没有实际输出的 -ms-grid- 属性。很多项目配置看似完整，但因版本或条件不满足，最终零输出。
- 检查
postcss.config.js中是否明确启用：autoprefixer({ grid: true })（注意：v9+ 已废弃该行为，实际无效） - 确认
browserslist包含ie 11，且不是靠last 2 versions间接覆盖（它会忽略 IE11） - 搜索构建产物 CSS，查找
-ms-grid-columns、-ms-grid-row等字符串——一个都没有，说明没生效 - 打开 IE11 开发者工具 → 计算样式，看
display是否为-ms-grid，而非回退到block
@supports (display: grid) 在 IE11 中毫无意义
这个特性查询本身就不被 IE11 支持，所以用它包裹 Grid 样式，结果是 IE11 直接跳过整块 CSS，既不执行也不报错。你以为做了优雅降级，其实 fallback 根本没机会加载。
- ❌ 危险写法：
@supports (display: grid) { .grid { display: grid; } } - ✅ 可行方案：用 JS 检测
CSS.supports('display', 'grid')，或更稳妥地用 class 控制（如html.no-grid），再配合两套独立样式 - 真实项目中，多数团队已放弃 IE11 全功能 Grid，改用线性布局 fallback（flex + margin）或直接不支持
真正麻烦的不是加前缀，而是 IE11 的 -ms-grid 和现代 grid 是两套互不兼容的布局模型：一个靠硬编码行列，一个靠自动算法；一个不支持 gap，一个依赖 gap。试图用工具“自动桥接”，只会掩盖问题，直到上线才发现某处跨度算错、某行高度塌陷、某区域错位——这些都得一行行手调，没法靠配置绕过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
