ie11 不支持 display: grid，必须手动写 display: -ms-grid；autoprefixer 不会自动添加该声明，仅在已存在时补全配套属性；grid-column 等负值或 span 无法转换；@supports (display: grid) 在 ie11 中无效。
IE11 根本不识别 display: grid
不是样式没生效，是浏览器直接忽略整条声明——IE11 只认 display: -ms-grid，连语法解析都过不去。Autoprefixer 不会把 display: grid “变出” display: -ms-grid，它只在你写了 display: -ms-grid 的前提下，补全 -ms-grid-columns 这类配套属性。
常见错误现象：
- 开发者写了现代 Grid 代码，打开 IE11 发现布局完全塌陷成流式排列
- 检查计算样式，
display值为空或回退到block，根本看不到-ms-grid
必须手动写：display: -ms-grid，再配合 display: grid（现代浏览器覆盖）；否则 Autoprefixer 拿不到“输入”，就无法生成任何 MS 前缀。
grid-column: 1 / -1 在 IE11 中不会生成 -ms-grid-column-span
Autoprefixer 对 IE11 的 Grid 支持极其有限：它只处理明确的正整数跨度，遇到负值、span 关键字或隐式轨道，直接跳过转换。
使用场景：
- 你想让一个子项横跨全部三列 → 写
grid-column: 1 / 4（假设-ms-grid-columns定义了 3 列） - 写了
grid-column: 1 / -1或grid-column: span 3→ Autoprefixer 不生成-ms-grid-column，IE11 定位失效
性能影响：看似只是写法差异，但一旦漏掉跨度换算，整个网格项在 IE11 中会默认落在第 1 列第 1 行，破坏所有布局逻辑。
Autoprefixer 的 grid: true 在 v9+ 已失效
2025 年起，Autoprefixer 主动移除了对 IE Grid 的转换能力。即使你在 postcss.config.js 里写了 autoprefixer({ grid: true })，也不会输出任何 -ms- 属性。
验证方法：
- 检查编译后 CSS 文件，搜索
-ms-grid-—— 如果一个都没有，说明插件没起作用 - 确认
autoprefixer版本 ≥ v10.x，caniuse-lite是最新版（旧数据会导致误判） - 别依赖
browserslist里的ie 11自动触发 Grid 降级，它现在只管前缀，不管语法映射
真正起作用的是你手写的源码是否符合 IE11 的旧规范：必须有 -ms-grid-columns、-ms-grid-rows、-ms-grid-column，Autoprefixer 才会在其基础上微调。
@supports (display: grid) 在 IE11 中完全不可用
这个特性查询本身就不被 IE11 支持，所以用它包裹 Grid 代码，结果是 IE11 直接跳过整块样式，既不执行也不报错——你以为做了降级，其实连 fallback 都没机会加载。
容易踩的坑：
- 用 JS 检测
CSS.supports('display', 'grid')→ IE11 报undefined，导致逻辑中断 - 以为 Autoprefixer 能帮你在
@supports块内做 MS 转换 → 实际上它只处理顶层规则 - 没提前定义
-ms-grid-columns，却指望子项-ms-grid-column: 2能自动对齐 → IE11 无隐式轨道，列未定义 = 定位失败
最稳妥的做法是放弃“自动检测 + 自动降级”幻想，用构建时条件编译（如 PostCSS 插件分离两套样式）或服务端 UA 判断，把 IE11 的 -ms-grid 代码当作独立分支来维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
