IE6/7中浮动元素的margin-left或margin-right被渲染成两倍怎么办
这是IE6/7特有的浮动元素双倍边距bug：当一个浮动元素（比如float: left）同时设置了display: inline以外的display值，且有margin-left或margin-right时，IE会把该方向的外边距翻倍。
根本原因不是CSS写错了，而是IE6/7在浮动布局计算中错误地将“行内格式化上下文”的边距处理逻辑套用到了块级浮动元素上。
- 只影响
float元素，非浮动元素不会触发 - 只发生在
margin-left（对float: left）或margin-right（对float: right）方向 -
margin-top/margin-bottom完全不受影响 - 现代浏览器（Chrome/Firefox/Edge）和IE8+已修复，仅需兼容IE6/7时才需处理
为什么加display: inline能修复
给浮动元素显式声明display: inline，并不会让它变成真正的行内元素（它依然脱离文档流、仍可设宽高），但会**强制IE跳过那个错误的双倍边距计算路径**——这是IE内部的一个历史兼容逻辑分支。
注意：display: inline本身不改变浮动行为，只是“骗过”了IE的渲染引擎。但它有副作用：
立即学习“前端免费学习笔记（深入）”；
- 某些IE6下，
inline元素无法设置height/width，所以必须确保该元素原本就不依赖这些尺寸（或改用zoom: 1触发hasLayout辅助） - 如果元素内含
vertical-align相关布局，display: inline可能引发基线对齐意外偏移 - 不要和
display: inline-block混淆——后者在IE6/7中基本不可用，且不能修复此bug
更稳妥的替代方案：用zoom: 1触发hasLayout
比起display: inline，zoom: 1是更通用的IE6/7修复手段，它通过触发元素的“hasLayout”机制来绕过多个渲染bug，包括双倍边距。
它不改变元素的display类型，兼容性更干净：
-
zoom: 1是IE私有属性，在其他浏览器中被忽略（安全） - 保留原有
display值（如block），避免尺寸/对齐副作用 - 常与
*display: inline组合使用（星号hack），实现仅IE6/7生效：
div.float-box {
float: left;
margin-left: 20px;
zoom: 1;
*display: inline;
}
其中*display: inline是针对IE6的hack（IE7及以下识别*前缀），而zoom: 1在IE6/7都有效。
现代项目里还用得着吗
绝大多数场景下不用了。IE6全球份额早已低于0.01%，主流框架、构建工具（如Webpack、Vite）默认不再输出IE6/7兼容代码，CSS前缀工具（Autoprefixer）也已移除对它的支持。
但如果维护的是老政企系统、内网OA或嵌入式Web控件（比如某些ActiveX容器中的IE内核），仍可能遇到。此时要注意：
- 别盲目全局加
zoom: 1——它可能意外触发IE的其他hasLayout副作用（如z-index分层异常） - 优先用条件注释或JS UA检测精准加载补丁，而不是污染所有样式
- 如果用了Flexbox或Grid布局，这个bug天然不存在——因为浮动本身就被绕过了
真正容易被忽略的是：有些老CSS重置库（如HTML5 Reset早期版）会无差别给所有浮动元素加display: inline，结果在现代浏览器里反而导致内联样式冲突或调试困惑。
