ie11不支持现代css grid语法，必须手动使用-ms-grid旧语法并精确计算行列数。需写display: -ms-grid; display: grid;，grid-column等属性要换算为具体正整数值，autoprefixer v9+已移除ie grid转换能力。
IE11 里 display: grid 根本不生效，不是漏前缀，是语法不识别
直接写 display: grid，IE11 会完全忽略这条声明，计算样式里连 display 值都看不到。它只认 display: -ms-grid —— 这是 2012 年草案的旧语法，和现代 Grid 不是一套东西。Autoprefixer 不是转换器，不会把 display: grid “变成” display: -ms-grid；它只在你**已经写了 display: -ms-grid** 的前提下，补几个配套属性。
常见错误现象：
- 布局在 Chrome 正常，在 IE11 变成垂直堆叠（回退到 block 流）
- 开发者工具里查不到任何
-ms-grid-相关声明
必须手动写：
.grid {
display: -ms-grid;
display: grid;
}
grid-column: 1 / -1 在 IE11 中彻底失效，必须换算成具体列数
IE11 的 -ms-grid-column-span 只接受正整数，不支持负值、span 关键字或隐式轨道。Autoprefixer 遇到 grid-column: 1 / -1 或 grid-column: span 3 会直接跳过整条规则，不生成任何 -ms- 属性，结果就是元素默认落在第 1 列第 1 行，导致错位。
正确做法是手动算清总列数并写死：
- 如果
-ms-grid-columns定义了1fr 2fr 1fr（共 3 列），要横跨全部列 → 写grid-column: 1 / 4 - 避免用
grid-area：它无法被映射为-ms-grid-row+-ms-grid-column组合，必须拆解成单侧属性 - 子项定位优先用
grid-column-start+grid-column-end，避开复合值
Autoprefixer 的 grid: true 在 v9+ 已失效，降级无意义且更不可靠
从 Autoprefixer v9（2021 年起）开始，官方已移除对 IE Grid 的语法转换能力。即使你在 postcss.config.js 里配了 autoprefixer({ grid: true })，也不会生成任何 -ms-grid- 属性。有人尝试降级到 v8.x，但实测问题更多：漏定义行列、跨度错位、grid-gap 被转成无效 margin，调试成本远高于手写。
真正可控的做法是：
- 明确在
.browserslistrc或package.json里写ie 11，不能只写last 2 versions - 禁用
postcss-preset-env的stage: 0功能（如gap、aspect-ratio），否则它会把现代语法提前“乐观编译”，让 Autoprefixer 失去处理机会 - 确认 PostCSS 实际运行：在
postcss.config.js里故意 require 一个不存在的模块，不报错就说明配置根本没加载
IE11 的 -ms-grid 是静态网格，没有自动定位能力
现代 Grid 的 grid-auto-flow、grid-template-areas、minmax()、auto-fit 全部不支持。fr 单位虽能出现在 -ms-grid-columns 中，但混用 auto 和 fr（如 auto 1fr）极易导致渲染异常。最稳妥的是统一用百分比或固定值。
关键硬约束：
-
-ms-grid-column-span和-ms-grid-row-span只接受正整数，且总列/行数必须预先算死 -
@supports (display: grid)在 IE11 中永远返回 false，无法用于条件加载，得用 JS 检测或 IE 专用媒体查询 - 所有子项都必须显式指定
-ms-grid-column和-ms-grid-row，没有“自动放置”这回事
错位往往不是某一行代码写错，而是整个模型理解偏差——把现代 Grid 的动态性，强套在 IE11 的静态网格上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
