IE11中display: grid完全不生效，必须手动添加-ms-grid前缀并显式声明-ms-grid-columns等属性，且@supports需加模板约束（如and (grid-template-columns: 1fr)）才能准确筛除半支持浏览器。
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关键字或隐式区域计算
@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）必须写在块外层，且属性值得是老浏览器能理解的语法
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; }（父容器负边距抵消最后一行多余间隙） - 避免用
padding或border模拟gap：响应式下尺寸易失控，尤其配合max-width时 - 所有网格项必须设
box-sizing: border-box，否则margin会撑破容器宽度
Android 4.4 WebView 不认 @supports，需 UA + DOM 探测双保险
Android 4.4（Chromium 30 内核）既不支持 display: grid，也不识别 @supports 规则本身，整块 CSS 被静默丢弃。降级逻辑必须绕过 CSS 检测，靠 JS 主动判断。
立即学习“前端免费学习笔记（深入）”；
- UA 字符串匹配：
/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent) - DOM 特性探测：创建临时
div，设style.display = 'grid'，插入 DOM 后检查getComputedStyle(div).display是否仍为'grid'（Android 4.4 返回'block'） - 匹配成功后给
<html>加class="no-grid"，CSS 中用.no-grid .grid-container { display: flex; }启用降级 - 别信
CSS.supports('display', 'grid')：该 API 在 Android 4.4 中不存在；也别用getComputedStyle(el).display === 'grid'：返回值永远是'block'
-ms- 属性，IE11 的 -ms-grid 引擎仍有硬约束——-ms-grid-column-span 只接受正整数，不支持动态计算；-ms-grid-row-align 等对齐属性支持极差，多数情况得退回 text-align 或 margin: auto。 
