如何通过设置display:inline解决旧版IE中浮动元素的边距加倍问题？

本文共计823个文字，预计阅读时间需要4分钟。

这是IE6/7特有的浮动元素双边距bug：

根本原因不是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的渲染引擎。