旧版浏览器对 CSS Grid 的兼容性问题是声明被静默跳过而非样式失效；需用 DevTools 验证 display 和 grid-template-columns 解析结果，双条件 @supports 检测、显式书写 -ms-grid、替换 gap/grid-area 为兼容写法，并注意 IE11 不支持负索引与 span。
旧版浏览器对 CSS Grid 的兼容性问题不是“样式没生效”，而是“声明被静默跳过”——grid-gap 不渲染、grid-template-areas 被忽略、fr 解析为 0，连 @supports (display: grid) 都可能误判。排查必须从浏览器真实解析行为出发，不能靠猜。
用 DevTools 直接验证 Grid 是否被识别
别信文档或 caniuse，看浏览器自己怎么读你的 CSS：
- 在 Safari（≤10.1）或 IE11 中打开开发者工具 → Computed 面板 → 搜索
display：如果显示block或inline，说明display: grid声明根本没被解析 - 再搜
grid-template-columns：若值为空、none或显示为灰色带删除线，基本可确认是语法不支持，不是写错了 - 临时加
outline: 1px solid red到子元素上，观察 outline 是贴着文字边缘还是按网格线对齐——错位即证明定位未触发
检查 @supports 检测是否真正筛掉了旧浏览器
@supports (display: grid) 单条件检测在 Safari 10.1 和 IE11 中都不可靠：
- Safari 10.1 能识别
display: grid，但会静默丢弃gap和grid-template-areas，导致布局碎裂 - IE11 完全忽略整个
@supports块，降级样式如果只写在里面，它根本看不到 - 正确写法必须双条件：
@supports (display: grid) and (grid-template-columns: 1fr)，这个组合能准确筛掉 IE 全系和 Safari ≤10.1 - 所有降级样式（如
display: flex）必须写在@supports块外层，且语法要兼容旧浏览器（比如别用gap或justify-content: start）
确认 Autoprefixer 是否真的输出了 -ms-grid 属性
Autoprefixer v9+ 已移除自动语法转换能力，它只补前缀，不改结构：
立即学习“前端免费学习笔记（深入）”；
- 源码里没写
display: -ms-grid，它就不会生成任何-ms-属性，哪怕你配了grid: true - 正确写法必须显式并列：
display: -ms-grid; display: grid;，之后的grid-template-columns才可能转出-ms-grid-columns - 检查最终生成的 CSS 文件，搜索
-ms-grid—— 如果没有，说明 Autoprefixer 根本没触发，不是配置问题，而是源码没满足输入条件 -
browserslist必须显式包含ie 11，仅写last 2 versions会被忽略
验证 gap 和 grid-area 是否实际生效
这两项在旧浏览器中失效方式高度隐蔽：
-
getComputedStyle(el).gap在 IE、Safari ≤14.1、Android WebView ≤76 中返回空字符串，不是0px或undefined -
grid-area在 Safari ≤10.1 和 IE11 中完全不支持，强行使用会导致整条display: grid声明被跳过，回退为display: block - 修复方案不是加前缀，而是替换：
grid-area: header→ 改用grid-column: 1 / -1; grid-row: 1；gap: 1rem→ 改用margin-right+margin-bottom+ 父容器负边距抵消 - 所有网格项必须设
box-sizing: border-box，否则margin模拟间隙时容易撑破容器
最常被忽略的一点：IE11 的 -ms-grid 不支持负索引（如 -1）、span 关键字或隐式区域计算，每个子项的行列位置都得手动换算——现代写法里的 grid-column: 2 / -1，在 IE 里必须拆成 -ms-grid-column: 2; -ms-grid-column-span: N，N 得根据总列数手算。
