旧版 safari 和 ie 不支持 display: grid，需用 flex 降级并注意兼容细节：ie10 需加 -ms- 前缀且不支持 flex: 1 缩写，safari 6.1–8.0 不支持 align-content；推荐先写 flex 基础布局，再用 @supports 覆盖 grid，避免混用导致冲突。
旧版 Safari 和 IE 不支持 display: grid 怎么办
直接不生效，页面会塌成一列或完全错位。IE10–11 只支持旧版网格语法（display: -ms-grid），而 Safari 9 及更早版本压根不识别 grid 相关属性。不能只靠 @supports 做判断——它在 IE 中无效，Safari 9 也不支持该规则。
用 display: flex 降级时要注意哪些兼容性细节
Flex 在 IE10+、Safari 6.1+、Chrome 21+ 都可用，但行为差异大。关键不是“能不能用”，而是“怎么用才不翻车”：
-
flex-wrap: wrap在 IE10 中需加-ms-flex-wrap: wrap，否则子项强行单行溢出 - IE10 不支持
flex: 1缩写，得拆成-ms-flex: 1 - Safari 6.1–8.0 不支持
align-content，垂直多行居中会失效 - 避免在 flex 容器里混用
float或display: inline-block，IE 中容易触发怪异的基线对齐
如何安全地叠加 grid + flex 两套布局
不要靠 JS 检测浏览器再切换 class，太重且易漏。推荐纯 CSS 的渐进增强写法：先写 flex 布局作为基础，再用 @supports 覆盖 grid —— 这样不支持 @supports 的老浏览器（如 IE）自动跳过 grid 规则，稳稳回退到 flex。
/* 基础 flex 布局（所有现代+旧浏览器都走这里） */
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item {
-ms-flex: 0 0 300px;
flex: 0 0 300px;
}
<p>/<em> 支持 @supports 的浏览器才启用 grid </em>/
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.item {
margin: 0; /<em> 覆盖 flex 下的 margin </em>/
}
}IE11 下 grid 和 flex 混用会出什么问题
IE11 同时支持 display: -ms-grid 和 display: flex，但二者逻辑冲突。如果在同一个选择器里写了两套声明，IE11 会按书写顺序取最后一个生效的 display 值——但它的 -ms-grid 实现残缺（不支持 grid-gap、auto-fit），且和 flex 的盒模型计算方式不同，极易导致尺寸错乱或内容截断。
立即学习“前端免费学习笔记（深入）”；
- 别在同一个 class 里同时写
display: flex和display: -ms-grid - IE11 专用样式必须用条件注释或
@media all and (-ms-high-contrast: none)隔离 - 测试时重点看
minmax()和fr单位在 IE11 中是否被忽略（它们会被当作文本丢弃）
真正麻烦的不是写两套代码，而是 flex 在旧浏览器里对 box-sizing、margin-collapse 和 vertical-align 的处理和现代标准不一致——这些细节不会报错，但会让布局在边缘场景突然偏移几像素。
