Flexbox在IE10+及现代浏览器中支持良好，但IE9及更早版本完全不支持display: flex；需通过条件注释加载独立样式表，用display: block+浮动/定位/表格布局降级，保持HTML结构语义不变。
弹性盒子（Flexbox）在 IE10+ 和现代浏览器中支持良好，但 IE9 及更早版本完全不支持 display: flex。若项目需兼容 IE8/IE9，不能直接依赖 Flexbox，必须提供降级方案——其中最常用、最稳妥的方式是回退到 display: block + 浮动/定位/表格布局 的组合，而非单纯用 display: block（它本身不具备布局能力）。关键在于结构语义不变，仅通过 CSS 切换布局逻辑。
结构保持语义化，避免为兼容写两套 HTML
不要为旧浏览器单独写一套浮动 HTML 结构。所有浏览器共用同一套 HTML，例如：
<div class="container"><br> <div class="item">A</div><br> <div class="item">B</div><br> <div class="item">C</div><br></div>
这样可维护性高，也利于无障碍和 SEO。兼容逻辑全部交由 CSS 控制。
用条件注释或 CSS 媒体查询区分 IE8/9
IE8/9 不支持 @supports，推荐用 HTML 条件注释加载独立样式表（针对 IE9 及以下）：
立即学习“前端免费学习笔记（深入）”；
<!--[if lt IE 10]><br><link rel="stylesheet" href="ie8-9.css"><br><![endif]-->
或在主 CSS 中用 * html（IE6）、:root（IE9）等 hack 精准命中，但条件注释更清晰可控。
block 降级的核心：用浮动 + 清除 + 宽度模拟 flex 行为
Flex 常见场景如水平排列、等宽分布、垂直居中，在旧版中需分情况处理：
-
水平排列（flex-direction: row）：给子项设
float: left+ 明确宽度（如width: 33.33%），容器加overflow: hidden或::after清除浮动 -
等宽自适应（flex: 1）：用
display: table+table-layout: fixed，子项设display: table-cell，兼容 IE8+ -
垂直居中（align-items: center）：对单行内容可用
line-height = height；多行或块级内容建议用绝对定位 +transform: translate(-50%, -50%)（IE9+ 支持），IE8 则改用top: 50%+ 负 margin（需固定高度）
渐进增强，优先写现代语法，再覆盖旧版规则
在 CSS 中先写 Flex 布局，再用 IE 专属样式表或 hack 覆盖。例如：
.container {<br> display: flex;<br> justify-content: space-between;<br>}<br><br>/* IE9 及以下 */<br>.ie9 .container {<br> display: block;<br>}<br>.ie9 .container .item {<br> float: left;<br> width: 30%;<br>}<br>.ie9 .container::after {<br> content: "";<br> display: table;<br> clear: both;<br>}借助构建工具（如 Autoprefixer）可自动补全部分前缀，但无法解决 IE8/9 缺失的 display 属性，仍需手动降级。
