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起微软废除了条件注释语法，所以
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
