CSS浮动在旧版浏览器中的双倍Margin修复_display:inline

ie6下浮动元素横向margin被渲染为两倍，是因双边距bug；通过_display:inline可修复，因其强制触发ie6渲染副作用而避免重复计算margin。

IE6 下 Float 元素的 margin 被渲染成两倍怎么办

这是 IE6 的经典 bug：对浮动元素（float: left 或 float: right）设置横向 margin（比如 margin-left），实际渲染出来的间距会是声明值的两倍。

根本原因是 IE6 的双边距 Bug（double Margin Bug）——当浮动元素同时具备 display: inline（默认行内特性残留）和 float 时，解析器错误地将 margin 计算了两次。

• 只影响 IE6 及更早版本，IE7+ 已修复
• 仅触发于 float + 横向 margin（margin-left/margin-right）组合
• 垂直方向 margin-top/margin-bottom 不受影响

_display:inline 是什么，为什么能“修复”

_display:inline 是 IE6 专属的 css hack 写法（下划线前缀仅 IE6 识别），它强制让元素在 IE6 中表现得像行内元素——但这不是为了“变内联”，而是为了触发 IE6 渲染引擎的一个副作用：一旦元素被标记为 display:inline，再应用 float，IE6 就不再重复计算 margin。

本质是“骗过” bug 触发条件，而非真正改变布局模型。现代浏览器完全忽略该声明，无副作用。

立即学习“前端免费学习笔记（深入）”；

• 必须写在 float 声明之后，否则无效
• 不能用 *display:inline 替代——那是 IE7 hack，对 IE6 无效
• 只对触发 bug 的元素本身设置，不影响父容器或其他兄弟元素

更稳妥的写法：优先用 display:inline + 条件注释

虽然 _display:inline 简单直接，但混用 hack 容易在后续维护中误删或覆盖。更清晰的做法是把修复逻辑隔离到 IE6 专属样式里：

/* IE6 only via conditional comment */  <!--[if IE 6]><style>     .my-float-element { display: inline; }   </style><![endif]-->

这样既避免污染主样式表，又明确表达了“这是针对旧版的兜底处理”。

• 如果项目已弃用 IE6 支持，这段代码可直接删除
• 若用构建工具（如 webpack），可通过 postcss-ie6 插件自动注入
• 不要对所有浮动元素盲目加 _display:inline——只加在实际出现双倍 margin 的地方

现代项目里还用不用管这个 bug

绝大多数新项目已不兼容 IE6，但如果你正在维护一个老系统，或者需要支持政府/银行等仍运行 XP+IE6 的终端环境，就得保留这个修复。否则，它只是历史包袱。

真正容易被忽略的是：有些 CSS 重置库（如早期 Yui Reset）或 UI 框架（如旧版 bootstrap 2）默认给浮动元素加了 display:inline，你以为是“为了清除间隙”，其实是在静默修复这个 bug。

查问题时别急着加 hack，先确认是否真由 IE6 引起——用 IE6 开发者工具看 computed style，检查 margin-left 是否显示为声明值的两倍。