IE11仅支持-ms-grid且需手动定位，Autoprefixer不转换语法只加前缀；-ms-grid-column-span不支持负值或span，gap须用margin模拟，@supports在IE11中完全无效。
display: grid，必须显式改写为 display: -ms-grid，且所有子项需手动定位、gap 用 margin 模拟，@supports 在 IE11 中完全无效——它会直接跳过整块规则。
为什么 Autoprefixer 没生成 -ms-grid-columns？
Autoprefixer v9+ 已移除对 IE Grid 的语法转换能力，它只补前缀，不改语法。你写的源码里没出现 display: -ms-grid，它就什么都不会做。
- ❌ 错误写法：
.grid { display: grid; grid-template-columns: 1fr 2fr; }→ Autoprefixer 完全忽略 - ✅ 正确写法：
.grid { display: -ms-grid; display: grid; grid-template-columns: 1fr 2fr; }→ 才可能输出-ms-grid-columns: 1fr 2fr -
browserslist必须显式包含ie 11，仅写last 2 versions会被忽略 - PostCSS 插件顺序错误（如
postcss-preset-env在autoprefixer前）会导致-ms-grid被提前转成现代语法，后续无从补全
grid-column: 2 / -1 在 IE11 中为何失效？
IE11 的 -ms-grid-column-span 只接受正整数，不识别负索引、span 关键字或隐式轨道计算。Autoprefixer 遇到这类写法直接跳过，子项默认落在第 1 行第 1 列，布局全乱。
- ❌
grid-column: 1 / -1、grid-column: span 2、grid-column: 2 / auto→ 零输出 - ✅ 必须手动换算：若父容器定义了 4 列，
grid-column: 1 / 5→ 转为-ms-grid-column: 1; -ms-grid-column-span: 4 -
grid-area名称无法映射，必须拆解为grid-row-start+grid-column-start等单侧属性 - 所有子项都得显式设
-ms-grid-row和-ms-grid-column，没有自动定位
gap 失效时，为什么不能用 padding 或 border 模拟？
grid-gap 在 IE 全系、Safari ≤14.1 中被静默忽略，getComputedStyle(el).gap 返回空字符串。用 padding 或 border 模拟会破坏盒模型，尤其在响应式场景下尺寸失控风险极高。
- ✅ 推荐做法：所有网格项统一设
box-sizing: border-box，再用margin - 横向间隙：
.item { margin-right: 12px; } .item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; } .grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙） - 避免嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块被忽略，fallback 彻底失效
@supports (display: grid) 为什么不能用于 IE11 分流？
@supports 本身在 IE11 中不被识别，整条规则被静默跳过——它既不会执行里面的样式，也不会触发 fallback。所谓“检测后降级”在 IE11 里根本走不通。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确策略：降级样式必须写在
@supports块**外层**，确保 IE11 和 Safari 9 这类浏览器能读到 - 推荐组合检测：
@supports (display: grid) and (grid-template-columns: 1fr)，筛掉大部分旧 WebKit（如 Safari 10.1 支持display: grid但不支持fr） - 别信 caniuse 上的“绿色”：它只标“是否支持”，不标“支持到哪一步”。
fr、subgrid、grid-template-areas在 IE11 中全是空白 - 真正容易被忽略的是：即使 Autoprefixer 输出了全部
-ms-属性，IE11 渲染仍可能错位——因为它的-ms-grid引擎有硬约束，比如混用auto和1fr会导致列宽归零
