display: inline 在 ie6 中能“修复”浮动元素 margin 双倍计算问题，是因强制切换渲染路径绕过 bug；仅 ie6/7 混杂模式有效，现代浏览器无视，且须作用于浮动元素自身、位于 float 声明之后。
直接加 display: inline 能修，但必须加在浮动元素自身、且写在 float 声明之后；它不是标准修复，而是利用 IE6 渲染引擎的路径绕过机制——别乱加，也别指望它在现代浏览器里起作用。
为什么 display: inline 看起来“有效”
IE6 在计算 float: left 元素的 margin-left 时，会错误地走一遍行内格式化上下文（IFC）的边距逻辑，导致值被累加两次。显式声明 display: inline 并不会让元素变回行内流（float 已让它脱离文档流），但它会强制 IE6 切换到另一条渲染分支，跳过那条出错的双倍计算路径。
- 这个行为只存在于 IE6（及部分 IE7 混杂模式），Chrome/Firefox/Edge/IE8+ 完全无视该组合
-
display: inline不影响宽高设置，但若元素原本依赖height或vertical-align，可能引发基线偏移 - 不能写成
display: inline-block——IE6 基本不支持，且无法触发 same-path bypass
display: inline 的安全写法和常见误用
直接写 display: inline 虽然能生效，但会污染 CSS 校验，也容易被后续维护者当成冗余样式删掉。更稳妥的做法是用 IE6 专属 hack：
- 用
*display: inline：星号前缀仅 IE6/7 识别，其他浏览器跳过，语义清晰 - 避免
_display: inline：下划线仅 IE6 识别，但在某些 IE7 quirks 模式下可能误触发，兼容边界模糊 - 不要把
display: inline加在父容器或伪类上——必须作用于触发 bug 的那个浮动元素本身 - 如果已有
display: block或其他 display 值，需用!important覆盖（IE6 支持!important）
比 display: inline 更推荐的替代方案
靠 hack 绕过 bug 是权宜之计，真正稳定的解法是避开触发条件本身：
- 用
zoom: 1触发 hasLayout：不改变 display 语义，无对齐副作用，IE6/7 都兼容 - 把
margin-left: 20px换成padding-left: 20px加父容器overflow: hidden包裹浮动——零 hack、零兼容风险 - 改用 wrapper：外层 div 不浮动、设 margin，内层 div 浮动——彻底分离布局控制与间距逻辑
- 如果项目已明确放弃 IE6 支持，直接删掉所有相关 hack；很多旧框架（如 Bootstrap 2）默认加的
display: inline其实只是历史包袱
真正麻烦的不是怎么修，而是没人知道哪一行 display: inline 正在悄悄撑开 IE6 下的侧边栏——留注释比留代码重要，尤其是当它看起来毫无道理的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
