IE11仅支持2012年旧版CSS Grid规范，需手动将display: grid改为display: -ms-grid，并用-ms-grid-column/-ms-grid-row等属性替代现代语法，fr单位须换算为具体数值或百分比，Autoprefixer仅加前缀不降级语法。
IE11 里 display: grid 根本不生效，连基本网格都渲染不出来
IE11 支持的是旧版 CSS Grid 规范（2012 年草案），和现代标准完全不兼容。直接写 display: grid 在 IE11 中会被忽略，等同于没写——不是样式错，是浏览器压根不认识这个声明。
Autoprefixer 默认只加前缀，不会把新语法降级成旧语法。它能把 grid-template-columns: 1fr 2fr 补上 -ms-grid-columns，但前提是你的源码里已经用了 IE 兼容的写法（比如 display: -ms-grid）。
- 必须手动把
display: grid改成display: -ms-grid，否则 Autoprefixer 不会“无中生有” -
grid-column-start要对应写成-ms-grid-column，grid-row-start对应-ms-grid-row - IE11 不支持
fr单位，得换算成-ms-grid-column: 1fr→-ms-grid-columns: 1fr 2fr是无效的；得用具体数值或1fr拆解为minmax(0, 1fr)这类写法也不被识别，老老实实用auto、100px或百分比
Autoprefixer 配置里开 overrideBrowserslist 也没用，IE 还是挂
很多人以为只要在 package.json 里加 "browserslist": ["IE >= 10"]，Autoprefixer 就会自动适配 IE 的 Grid 语法。其实不会——它只处理前缀（比如给 transform 加 -webkit-），不转换布局模型。
真正起作用的是你写的源码是否符合 IE 的旧规范。Autoprefixer 只是“翻译官”，不是“重构器”。它看到 display: -ms-grid 才会补 -ms- 前缀属性；看到 display: grid 就当它是现代语法，照常输出，IE 当然不吃这一套。
立即学习“前端免费学习笔记（深入）”；
- 检查编译后 CSS 是否真出现了
-ms-grid-column等属性，而不是只有grid-column - 确保 PostCSS 配置里
autoprefixer插件在postcss-preset-env之前（后者可能提前把旧语法转成新语法，反而破坏兼容） - IE10/11 对
-ms-grid-row-align等对齐属性支持极差，建议直接放弃居中，用text-align: center或margin: auto降级兜底
用 display: flex 降级时，IE10/11 的 flex-wrap 行为异常
当 Grid 不可用时，不少人 fallback 到 Flex 布局。但 IE10/11 的 Flex 实现是基于 2012 年草案的，flex-wrap: wrap 在某些组合下会完全失效，比如子项设了 flex-basis 或容器有 max-width。
更隐蔽的问题是：IE11 对 flex: 1 解析不稳定，有时等价于 flex: 1 1 0%，有时又当 flex: 1 1 auto 处理，导致宽度计算错乱。
- 避免在 IE 中依赖
flex-wrap实现多行；改用固定行数 +overflow: hidden或 JS 控制渲染数量 -
flex: 1必须显式写成flex: 1 1 0px或flex: 1 1 auto，不能省略第三个参数 - 测试时一定要在真实 IE11（不是 Edge 兼容模式）里打开 DevTools，看 computed 样式里的
flex-basis是否被识别为0px而不是auto
Grid 容器内嵌套 position: absolute 子元素，在 IE 中定位偏移
现代 Grid 中，position: absolute 元素以 Grid 容器为 containing block，左上角对齐容器起点。但在 IE11 里，如果容器用了 display: -ms-grid，绝对定位元素仍以最近的 position: relative 祖先为参考，Grid 容器本身不构成新的 containing block。
这意味着你在 Grid 里写的 top: 0; left: 0，在 IE 下可能飞到整个页面左上角，或者卡在父级某个相对定位盒子的角落。
- 不要依赖 Grid 容器作为绝对定位的参照物；统一给 Grid 容器加
position: relative - IE11 不支持
inset，所有top/right/bottom/left必须显式声明，且值不能是auto（会触发奇怪的默认行为） - 如果子项需要贴右，别用
justify-self: end+position: absolute组合——IE 两个都不认，老实用text-align: right或 float
box-sizing: border-box 和 padding 的解析差异叠加了 Flex fallback 的 margin 折叠问题。这种链式失效，必须逐层断点验证 computed 样式，不能只信源码逻辑。 
