IE11 不支持标准 display: grid，必须显式书写 display: -ms-grid；Grid 布局需手动计算行列位置、避免 gap 和 grid-template-areas，并将降级样式写在 @supports 外层。
IE11 里 display: grid 不生效，不是漏写了前缀，是它压根不解析这条声明——浏览器直接跳过，退化为 display: block。
IE11 根本不认 display: grid，必须手写 display: -ms-grid
Chrome 57+、Firefox 52+、Safari 10.1+ 才真正支持标准 Grid；IE11 只认 2012 年草案版，即 display: -ms-grid。Autoprefixer v9+ 已彻底移除语法转换能力，它不会把 display: grid 自动改成 display: -ms-grid，只会在你 already 写了 display: -ms-grid 的前提下补几个配套属性。
- 源码必须显式写：
display: -ms-grid; display: grid;（顺序不能反，IE11 遇到不认识的声明会跳过后续） -
browserslist配置里得明确包含ie 11，不能只写last 2 versions - PostCSS 插件顺序要检查：如果
postcss-preset-env在autoprefixer前运行，可能提前把-ms-grid转成现代语法，导致 Autoprefixer 无从下手
grid-column: 1 / -1 这类写法在 IE11 中完全失效
IE11 的 -ms-grid-column-span 只接受正整数，不识别负值、span 关键字或隐式轨道。Autoprefixer 看到 1 / -1 就直接放弃生成任何 -ms- 属性，子项默认落在第 1 列第 1 行。
- 正确做法是手动算总列数：比如
-ms-grid-columns: 1fr 2fr 1fr（共 3 列），要横跨全部 → 写grid-column: 1 / 4，再由 Autoprefixer 转成-ms-grid-column: 1; -ms-grid-column-span: 3 - 避免用
grid-area：它无法被映射为-ms-grid-row+-ms-grid-column组合，必须拆成grid-row-start/grid-column-start等单侧属性 -
fr单位虽能在-ms-grid-columns中出现，但混用auto和fr（如auto 1fr）会导致 IE11 渲染异常，建议统一用百分比或固定值
@supports (display: grid) 在 IE11 中毫无作用
IE11 完全不识别 @supports 规则，整块 CSS 都会被静默跳过——里面写的降级样式根本不会加载。指望它做 fallback 分流是无效的。
立即学习“前端免费学习笔记（深入）”；
- 降级样式必须写在
@supports块**外层**，IE11 才能执行 - 更稳妥的方式是 JS 特性检测：
if ('grid' in document.documentElement.style)，或构建时条件编译（如用 PostCSS 插件生成两套 CSS） - 别嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块被忽略，fallback 失效
gap 和 grid-template-areas 在 IE11 中彻底消失
gap 没有合法的 -ms- 对应属性，grid-template-areas 语法和 IE11 的行列坐标模型无映射关系——两者都会被浏览器静默丢弃，DevTools 里显示为灰色划掉，控制台却无任何提示。
-
gap只能用margin模拟：横向靠margin-right+:nth-child()清零，纵向靠margin-bottom+ 父容器负边距抵消 - 删掉所有
grid-template-areas声明——哪怕只用一次，旧 Safari 就可能让整个display: grid块退化为block - 改用
grid-row/grid-column显式定位：例如grid-area: header→ 改成grid-row: 1 / 2; grid-column: 1 / 4
最常被忽略的是：IE11 的 -ms-grid 是静态网格，没有自动布局能力——每个子项都得靠 -ms-grid-column 和 -ms-grid-row 显式指定位置，漏一个就会错位；而且它不支持 justify-items、align-content 等对齐属性，-ms-grid-column-align 支持极差，稳妥起见还是用 margin: auto 或 text-align。
