IE11不支持display: grid，需手动添加-ms-grid前缀并显式设置-ms-grid-columns等属性；@supports必须双条件检测（如display: grid且grid-template-columns: 1fr）；gap需用margin模拟，且降级样式须写在@supports外。
IE11 里 display: grid 完全不生效，必须手动写 -ms-grid
IE11 不解析 display: grid，连声明都跳过，不是“样式没起作用”，是压根没读。Autoprefixer v9+ 已彻底移除自动转换能力，它不会把 grid-template-columns 转成 -ms-grid-columns，除非你先写 display: -ms-grid。
❌ 错误写法：.grid { display: grid; grid-template-columns: 1fr 2fr; }
→ 编译后无 -ms- 属性，IE11 当作普通块级元素渲染
✅ 正确写法：.grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; }
-
fr单位在 IE11 中虽能出现，但混用auto和fr（如auto 1fr）易导致列宽错乱，建议统一用50% 50%或200px 300px - 每个子项必须显式定位：
grid-column: 2 / 4得拆成-ms-grid-column: 2; -ms-grid-column-span: 2；IE11 不支持负索引、span关键字或隐式区域计算 -
justify-items: center在 IE 中无效，得用-ms-grid-column-align: center替代
@supports (display: grid) 单独用会放行 Safari 10.1 这类半支持浏览器
只检测 display: grid 会让 Safari 10.1、iOS Safari 15.6 等进入 Grid 分支——它们能识别该声明，但不支持 gap、fr 或 auto-fit，结果布局碎裂。
✅ 必须加模板约束：@supports (display: grid) and (grid-template-columns: 1fr)
双条件筛掉绝大多数旧 WebKit 和 IE 全系
❌ 别用：@supports (gap: 1rem)：Firefox 63 以前不支持，反而误拦现代浏览器@supports (justify-content: start)：在旧 Safari 的 Grid 上根本无效，getComputedStyle 返回仍是 stretch
- IE11 和 Safari ≤9 完全忽略整个
@supports块，降级样式（如display: flex）必须写在块外层，且属性值得是老浏览器能理解的语法 - 别嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块会被忽略，fallback 失效
gap 在 IE/Safari/Android WebView 中静默失效，margin 模拟更可靠
grid-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中被完全忽略，DevTools 显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串。Autoprefixer 即使开启 grid: true，也只展开为 grid-row-gap/grid-column-gap，不加前缀。
横向间隙：.item { margin-right: 12px; box-sizing: border-box; }.item:nth-child(3n) { margin-right: 0; }
纵向间隙：.item { margin-bottom: 12px; }.grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙）
- 所有网格项统一设
box-sizing: border-box，避免margin撑破容器 - 不用
padding或border模拟gap：响应式下尺寸易失控，尤其配合max-width时 - Safari ≤10.1 只认合写的
gap属性，若用了row-gap或column-gap单独声明，直接忽略
旧版安卓 WebView（如 Android 4.4）既不支持 display: grid 也不支持 @supports
Android 4.4 的 WebView 基于 Chromium 30，它既不支持 display: grid，也不支持 @supports 规则本身。整个 @supports 块会被当作无效 CSS 忽略，连带里面的样式都不会加载。
立即学习“前端免费学习笔记（深入）”；
降级样式必须写在 @supports 块之前或之外，且语法得是它能认的：.grid-container { display: flex; flex-wrap: wrap; }@supports (display: grid) { .grid-container { display: grid; } }
- 别指望
@supports not (display: grid)：这个语法在 Android 4.4 里根本无效，浏览器直接报错并丢弃整条规则 - Flex 降级分支里必须显式重置：
flex-wrap: wrap、flex-basis: auto、align-items: stretch，避免和 Grid 的二维逻辑耦合 - Grid 分支里要覆盖掉 Flex 的
margin：比如.item { margin: 0 }，否则gap和margin叠加导致间距翻倍
@supports 在 IE11 里被跳过，gap 在 Safari ≤14.1 里静默消失，而 Android 4.4 根本不认 @supports 这个词。这些不是“部分兼容”，是各浏览器按自己节奏逐条跳过特性，必须每条都手动对齐。 
