IE10/IE11需用-ms-flexbox前缀并配合现代flex声明，float降级须用@supports隔离、统一box-sizing且避免混写，IE9以下推荐条件注释加载独立样式表。
flex布局在IE10/IE11里不生效，display: flex被忽略怎么办
IE10–IE11虽然支持display: flex，但只认带-ms-前缀的旧语法，且不支持gap、flex-wrap: wrap-reverse等新特性。直接写display: flex在IE里等于没写。
实操建议：
- 必须同时声明
display: -ms-flexbox（IE10）和display: flex（现代浏览器），让IE走自己的老路径 - IE10不识别
justify-content: center，得用-ms-flex-pack: center - IE11支持无前缀
display: flex，但align-items仍需-ms-flex-align: center才可靠 - 别依赖
flex: 1——IE下它常失效，改用-ms-flex: 1
示例片段：
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
float降级方案怎么写才不破坏现代布局
用float兜底不是简单加几行float: left，否则现代浏览器会多出浮动清除问题，或和flex规则冲突。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
@supports not (display: flex)包裹float规则，确保只在不支持flex的浏览器中启用 - 降级时放弃“弹性”语义，转为固定宽度+
float+margin模拟，比如三栏布局就设width: 33.333%而非flex: 1 - 必须加
clear: both到父容器末尾，或用::after伪元素清除浮动，否则父容器高度塌陷 - 避免在同一个选择器里混写
float和flex——浏览器可能按顺序解析，导致不可预期覆盖
示例：
@supports not (display: flex) {
.grid-item { float: left; width: 33.333%; }
.grid::after {
content: "";
display: table;
clear: both;
}
}
为什么float降级后文字换行错乱、图片错位
这不是float本身的问题，而是降级时忽略了盒模型差异：flex默认box-sizing: border-box，而float场景下很多老项目仍用content-box，加上padding/border会让实际宽度超100%。
实操建议：
- 所有参与
float布局的元素，强制加box-sizing: border-box - 避免在
float元素上用vertical-align——它对块级float无效，反而干扰行内表现 - 图片记得设
display: block，否则底部默认有空白间隙（inline元素基线对齐导致） - 如果用了
font-size: 0来消除float间的空格，记得在子元素里重置font-size，否则文字不显示
要不要给IE9及更早版本也做float兼容
要，但方式得变——IE9不支持@supports，也不支持flex任何语法，只能靠条件注释或UA判断加载独立样式表。
实操建议：
- 别在主CSS里塞IE9 hack（如
*display: inline），维护成本高且污染现代代码 - 用HTML条件注释引入单独的
ie9.css，里面只写float+width+clear组合，不掺任何flex相关声明 - IE8及以下连
float都容易出bug（比如margin双倍），这时优先考虑display: inline-block+zoom: 1触发hasLayout - 如果项目已明确不支持IE9以下，就别为它们写额外逻辑——省下的时间比调试强得多
真正麻烦的从来不是写两套布局，而是不同浏览器对同一行CSS的解析优先级不一致，比如IE11把display: -ms-flexbox和display: flex当两个独立声明处理，而Chrome会覆盖。这点容易被忽略，直到上线后发现某台Win7机器死活不对齐。
