IE6及更早版本存在浮动元素横向margin双倍渲染的bug，修复方案是添加display:inline。该bug仅影响首个浮动子元素的左右margin，现代浏览器无此问题。
浮动元素的 margin 为什么会变双倍？
这是 IE6 及更早版本中真实存在的渲染 bug，不是你写错了 CSS。当一个块级元素同时设置了 float 和横向 margin（比如 margin-left: 10px），IE6 会把它渲染成 20px —— 就是原值翻倍。
触发条件非常具体：元素必须是 display: block、有 float: left 或 float: right、且该方向的 margin 值不为 0。现代浏览器（Chrome/Firefox/Safari/Edge）完全不认这个 bug，所以它只在兼容老项目或内网 IE6 环境时才冒出来。
- 只影响横向 margin（
margin-left/margin-right），上下 margin 不受影响 - 仅对「第一个浮动子元素」生效（即父容器里首个
float元素） - 如果父容器没设置
width或用了overflow: hidden等 BFC 触发方式，bug 可能被间接掩盖，但这不是修复，只是巧合压住了表现
最稳妥的修复写法：display: inline
给出问题元素加 display: inline 是公认最轻量、副作用最小的修复方案。它不会改变布局流，也不影响其他样式继承，关键是 IE6 能正确识别并取消双倍 margin 行为。
注意这不是“让元素变内联”，而是利用 IE6 的一个解析特性：一旦浮动元素被声明为 display: inline，它就不再触发该 bug。现代浏览器完全忽略这个组合（float + inline）的语义冲突，照常渲染。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
.fix-double-margin { float: left; margin-left: 10px; display: inline; } - 不要用
display: inline-block—— IE6 不支持，且不能解决问题 - 避免用
*display: inline这类 hack 写法，现在基本没必要针对性喂 IE6
为什么不用 margin 除以二这种“取巧”方案？
有人试过把 margin-left: 10px 改成 margin-left: 5px，指望 IE6 翻倍后刚好是 10px。这不可靠。
- 如果后续需要适配其他浏览器或改用 Flex/Grid，这个“减半”值会变成维护陷阱
- 多个浮动元素嵌套时，bug 触发逻辑可能叠加，除以二无法预测结果
- 一旦开启 IE7+ 文档模式或混用 CSS 重置库，行为可能突变，排查成本远高于加一行
display: inline
现代项目里还用得着管这个 bug 吗？
绝大多数新项目可以彻底忽略。但如果你正在维护一个仍在用 IE6 的政务系统、工控页面或银行内网旧模块，这个 bug 就不是历史段子，而是真实影响对齐和栅格间距的硬伤。
真正容易被忽略的是：某些前端构建工具（比如老版本 webpack + css-loader）在压缩 CSS 时会删掉 display: inline 这类“冗余声明”，导致修复失效。上线前务必在目标环境里用开发者工具检查计算后的 display 值是否真的存在。
