display:inline不是修复手段而是历史误用源头，它在标准模式下无效，与float共存会破坏现代布局，应删除或用display:block!important覆盖。
现在不用解决——display:inline 不是修复手段，而是历史遗留的误用源头。
IE6双倍边距只在Quirks模式下触发
这个bug根本不会出现在标准模式中。只要HTML开头有，IE6就走标准解析路径，<code>margin-left不会翻倍。很多项目照搬老代码却没检查文档模式，结果在开发者工具里看到“IE6兼容”字样，其实是页面被自动降级到了怪异模式。
- 用F12开发者工具看“文档模式”是否为“IE6 Standards”；不是的话，先修
DOCTYPE -
display:inline在标准模式下完全无效，加了也白加 - 若页面必须跑在Quirks模式（比如老旧CMS模板无法改头），那问题不在CSS，而在整个渲染环境不可控
加display:inline反而会破坏现代布局
它会让浮动元素在Chrome/Firefox里失去height、width声明效果，导致Flex/Grid子项错位、伪元素消失、vertical-align失效。PostCSS和autoprefixer早已剥离对IE6 hack的支持，构建时可能直接删掉带*或_前缀的规则，但display:inline会被保留下来，成为静默污染源。
- 检查现有CSS里有没有
float和display:inline共存的规则，批量删掉 - 用
stylelint配declaration-property-value-blacklist拦截这类组合 - 如果删不掉（如第三方UI库），用
display:block !important覆盖，IE6认!important
真要兼容IE6，优先改布局结构而非修CSS
靠CSS hack兜底是高风险操作。IE6的hasLayout机制混乱，zoom:1、overflow:hidden、display:inline-block之间容易互相干扰。更稳的方式是避开触发条件本身。
立即学习“前端免费学习笔记（深入）”；
- 把
margin-left: 10px从浮动元素上拿掉，挪到它的父容器上设padding-left: 10px - 或者包一层非浮动的
<div>，让外边距落在wrapper上 <li>避免连续多个<code>float:left并排——IE6只对第一个元素双倍，但后续维护者看不懂为什么只修第一个
真正难处理的从来不是display:inline该不该加，而是你手里的CSS文件里，哪一行还在按2006年的IE6 Quirks逻辑写。它可能藏在某个@import进来的旧reset.css里，也可能在十年没动过的header.less中。
