IE6怪异模式下float+margin-left触发双倍边距是渲染引擎缺陷，仅在无DOCTYPE时发生；现代浏览器及IE6标准模式均不受影响，应优先规避触发条件而非用display:inline等无效hack。
IE6怪异模式下float+margin-left触发双倍边距
这个问题只在IE6（及更早）的怪异模式（Quirks Mode）下真实存在，不是CSS写错了，而是渲染引擎缺陷：当元素同时满足 float: left、margin-left（或同方向margin-right），且页面**没有声明** 时，IE6会把横向margin重复计算一次。
现代浏览器、IE7+、甚至IE6的标准模式（有DOCTYPE）完全不受影响。先按 F12 打开开发者工具，看右上角“文档模式”是不是 “IE6 Quirks”——不是这个，加display:inline也没用，纯属白忙。
别再无脑加 display:inline
display:inline只是“碰巧”在IE6怪异模式下绕过bug，但它在标准模式下无效，在Chrome/Firefox中反而会破坏布局：
- 它会让
width/height声明失效，Flex/Grid子项错位 - 伪元素（
::before/::after）可能消失 - PostCSS等构建工具通常保留它，却删掉
*margin-left这类hack，导致修复被静默移除 - 它和
float共存时语义矛盾，现代CSS检查工具（如stylelint）可配declaration-property-value-blacklist直接拦截
如果你的项目里还搜到float: left; display: inline;这种组合，建议批量删掉——它不是补丁，是历史债务。
立即学习“前端免费学习笔记（深入）”；
真正有效的解决路径
优先避开触发条件，而不是修表现：
- 把
margin-left: 10px从浮动元素上拿掉，改到父容器设padding-left: 10px - 包一层非浮动的
<div> wrapper，外边距落在wrapper上<li>连续多个<code>float: left时，只对第一个元素出问题，但后续维护者看不懂“为什么只修第一个”，不如统一重构 - 实在要兜底，用
display: block !important（IE6支持!important），比display:inline更干净
注意：_margin-left: 5px这类hack虽能用，但PostCSS可能删掉带下划线的属性，造成构建后bug重现，风险高于收益。
最常被忽略的检查点
这个bug藏得深：它可能不在你写的主样式里，而在某个@import进来的旧reset.css中，也可能埋在十年没动过的header.less末尾注释下面。查不到具体哪一行？先全局搜索float.*inline和margin.*left.*float正则，比逐行调试快得多。
