17370845950

Flex布局IE10+部分支持、IE11基本完整，IE9及以下完全不支持；应采用渐进增强策略，以浮动或inline-block为基础布局，再为现代浏览器升级Flex，并用前缀、@supports或Modernizr实现兼容。

Flex 布局在 IE10+（部分支持）、IE11（基本完整）中可用，但 IE9 及更早版本完全不支持 display: flex。若需兼容 IE8/IE9，不能直接“用 Flex 降级”，而应主用传统布局，再为现代浏览器升级到 Flex——即“渐进增强”，而非“降级方案”。

优先使用浮动或 inline-block 实现基础布局

这是最稳妥的兼容起点，所有旧浏览器都支持：

• 用 float: left + width 搭配 clear: both 实现多列布局
• 用 display: inline-block + vertical-align: top 替代 Flex 的对齐能力
• 确保父容器设置 font-size: 0 消除 inline-block 元素间的空白间隙（子元素内再恢复字号）

用 CSS 条件注释或 JS 检测启用 Flex

针对 IE10+，可安全启用 Flex，无需担心崩溃：

• IE10 需加 -ms- 前缀：display: -ms-flexbox、-ms-flex-align: center
• IE11 支持无前缀 display: flex，但部分属性（如 flex-wrap）仍建议保留 -ms- 前缀
• 可用 @supports (display: flex) 包裹现代样式（注意：IE 不支持 @supports，所以它自动跳过，天然安全）

避免依赖 Flex 独有特性做核心功能

比如 flex: 1 自适应宽高、align-items: stretch 等，在旧浏览器无法模拟。应：

• 将高度自适应改为固定高度或 JS 计算（如 jQuery.height()）
• 垂直居中改用 position: absolute + transform: translateY(-50%) 或表格单元格（display: table-cell）
• 换行布局（flex-wrap）改用媒体查询 + 浮动断点控制

用 Autoprefixer 自动补全前缀，但别依赖它解决兼容逻辑

Autoprefixer 能加 -ms-、-webkit- 等前缀，但它不会帮你写两套布局代码：

• 配置目标浏览器（如 "ie >= 9"）后，它会输出 IE9+ 兼容的 Flex 前缀版本
• 但 IE8 仍需单独的样式表或条件类（如 ），用独立规则覆盖
• 推荐配合 Modernizr 使用，按实际能力加载对应 CSS 规则

不复杂但容易忽略：兼容不是让所有浏览器看起来一模一样，而是保证内容可读、功能可用、结构合理。Flex 是增强手段，不是兜底方案。