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 是否显示为声明值的两倍。
