IE8及以下不支持flex布局，display: flex会彻底失效；兼容方案需用条件注释加载IE专属样式表，结合display: table或float回退，并辅以特性检测确保降级可靠。
IE8及以下不支持flex布局，直接用display: flex会彻底失效
旧版IE（尤其是IE6–IE9）对CSS现代特性的支持极差，display: flex在IE10才开始部分支持，且需-ms-前缀；IE9及更早版本完全无视该声明，元素会回退到display: block或inline的原始行为，导致整个栅格/导航/卡片流塌陷。
别指望加个display: -ms-flexbox就能蒙混过关——IE10+才认这个，IE9压根不解析带-ms-的flex属性。真实场景中，常见错误是开发者写了完整flex代码后，在IE8里看到所有子元素堆成一列、宽度撑满、间距全无。
- 检测手段：打开IE开发者工具（F12），切换文档模式为IE8，看Computed面板里
display值是否还是flex（实际已变成block） - 兼容方案不是“降级为float”，而是用条件注释精准注入IE专属样式表：
<!--[if lt IE 9]> <link rel="stylesheet" href="ie8-layout.css"> <![endif]-->
-
lt IE 9匹配IE8及更早，IE 8只匹配IE8，避免误伤IE9（它虽不支持flex但支持display: table-cell等替代方案）
用display: table模拟flex主轴对齐，但vertical-align行为和flex不同
在ie8-layout.css里，把容器设为display: table，子项设为display: table-cell，能实现类似justify-content: space-between的效果，但垂直方向逻辑完全不同：table-cell默认vertical-align: middle，而flex默认align-items: stretch。
这意味着如果你原flex布局依赖子项高度自动拉伸填满容器，table方案下必须显式设置height或line-height，否则内容高度决定单元格高度，造成错位。
立即学习“前端免费学习笔记（深入）”；
-
table-cell不支持margin，用padding或border-spacing控制间距 - 要实现
justify-content: center，给table容器加text-align: center，不是给cell加 - IE7不支持
display: table，若还需兼容IE7，得回退到float+clear，并手动计算width百分比（IE7盒模型bug要求box-sizing: border-box无效，必须预留padding/border空间）
条件注释在IE10+被完全移除，documentMode检测不可靠
IE10起微软废除了条件注释语法，所以<!--[if IE]>在IE10+里会被当成普通HTML注释，直接忽略。这时候如果只靠条件注释加载polyfill，IE10用户会拿到无任何修复的现代CSS，照样错乱。
更麻烦的是，某些企业内网强制IE10用IE8文档模式（document.documentMode === 8），但页面实际运行在IE10渲染引擎上——此时条件注释不触发，而JS检测又可能误判为“支持flex”，导致双重失效。
- 真正可靠的判断方式是特性检测而非UA或
documentMode：if (!window.CSS || !CSS.supports || !CSS.supports('display', 'flex')) { /* 加载fallback */ } - 但IE8连
CSS.supports都没有，所以仍需条件注释兜底；IE10+则靠JS检测补位 - 不要在条件注释里写JS逻辑，IE8的JS引擎太弱，
querySelector、getComputedStyle等基本API都不可靠
用flexibility.js这类polyfill时，DOM插入时机必须在DOMContentLoaded之后
flexibility.js（或ie-flexbox）本质是遍历DOM，把display: flex规则转成table或float结构，并重写样式。但如果脚本在<head>里同步执行，DOM还没加载完，它什么也找不到，白跑一趟。
另一个坑是：这些polyfill通常依赖getBoundingClientRect()计算尺寸，而IE8对该API支持不稳定——如果元素尚未渲染（比如被display: none父层包裹），返回的宽高全是0，导致布局计算错误。
- 确保polyfill脚本放在
</body>前，或用defer属性 - 避免在
DOMContentLoaded之前操作flex容器的display或visibility - 如果页面有动态插入的flex区块（如AJAX加载的模块），需手动调用
flexibility.makeFlexible(element)重新初始化
复杂点在于：你得同时维护两套布局逻辑，一套给现代浏览器，一套给IE8，而且它们对“居中”“等高”“换行”的定义根本不同。最容易被忽略的是，IE8下font-size: 0清除inline-block间隙的技巧会破坏table-cell的基线对齐，导致文字偏移——这时候只能老老实实用letter-spacing: -0.31em或负margin硬调。
