css 网格布局在旧浏览器异常怎么办_提供 flex 作为降级方案

旧版 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; } 
/ 支持 @supports 的浏览器才启用 grid / @supports (display: grid) { .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 1rem; } .item { margin: 0; / 覆盖 flex 下的 margin / } }

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 的处理和现代标准不一致——这些细节不会报错，但会让布局在边缘场景突然偏移几像素。