旧浏览器不识别display: grid时布局直接失效：IE10/11降为单列堆叠，Safari≤8.0完全忽略grid属性致塌陷空白；@supports无效于IE全系及Safari≤9；-ms-grid需独立语法并置标准属性；推荐float→flex→grid分层回退。
旧浏览器不识别 display: grid 时会发生什么
直接失效——IE10/11 显示为单列堆叠，Safari ≤ 8.0 完全忽略所有 grid-* 属性，页面结构塌陷、错位甚至空白。这不是“样式不准”，而是布局引擎压根没解析那部分 CSS。尤其当用到 grid-template-areas 或 gap 时，IE11 和 Android 4.4 WebView 会彻底放弃渲染容器内容。
用 @supports 写降级必须避开的三个坑
@supports (display: grid) 看似安全，但实际在 IE 全系和 Safari ≤ 9 中被完全忽略（它们连该规则语法都不认识），所以它只对现代浏览器生效；而你真正想兜底的旧环境，反而根本进不了这个分支。
- 别把
flex和grid混写在同一选择器里，比如先写display: flex再在@supports里覆盖display: grid—— Autoprefixer 可能误将flex也加前缀，导致 IE10 解析出错 - IE11 不支持
gap，也不能用align-content，这些属性必须从@supports块里剔除，改用margin或包装容器模拟 - Safari 6.1–8.0 不支持
flex-wrap，所以降级的flex布局必须配flex-direction: column+height控制，或干脆退回float
IE11 专用 -ms-grid 的正确写法
它不是“加个前缀就行”，而是整套独立语法：没有 grid-template-rows，只有 -ms-grid-rows；不能用 auto-fit，必须写死轨道数；子项定位靠 -ms-grid-column/-ms-grid-row，且必须成对提供标准属性供现代浏览器读取。
.grid-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
}
.grid-item:nth-child(1) {
-ms-grid-column: 1;
grid-column: 1;
}
.grid-item:nth-child(2) {
-ms-grid-column: 2;
grid-column: 2;
}
关键点：display: -ms-grid 必须写在 display: grid 前面，否则 IE11 会跳过私有声明；所有 -ms-grid-* 属性都要和标准属性并存，不能只写一套。
立即学习“前端免费学习笔记（深入）”；
比 polyfill 更靠谱的兼容策略
别碰 css-grid-polyfill 类 JS 方案——它们在复杂嵌套、动态内容或 scroll 触发重排时极易卡死，且无法处理 subgrid 或响应式轨道计算。真实项目中，最稳的是分层回退：
- 基础层：用
float或inline-block实现可读结构（所有浏览器都认） - 增强层：用
@supports (display: flex)升级为 Flex（IE10+、Safari 7+ 支持） - 现代层：再用
@supports (display: grid)覆盖 Grid（Chrome 57+、Firefox 52+、Edge 16+）
这样既避免了 JS 依赖，又让每层浏览器拿到自己能理解的最小可行布局。真正的兼容难点从来不在语法转换，而在「哪些视觉逻辑必须保留」——比如三栏等宽，可以接受旧浏览器里用百分比宽度模拟；但「垂直居中+等高」这种 Flex/Grid 特性，在 IE8/9 里就得用 display: table-cell 或 JS 补齐。
