现在不用再给浮动元素加 display: inline 修复双倍边距——它只对 IE6 怪异模式有效，而该模式在现代项目中已不可能触发；加 display: inline 并非真正修复，而是让 IE6 切换渲染路径绕过 bug，却引发 vertical-align 失效、flex/grid 冲突等副作用，应删除或用 zoom: 1 和 *display: inline 等更稳妥的旧版方案替代。
现在不用再给浮动元素加 display: inline 修复双倍边距——它只对 IE6 怪异模式有效，而该模式在现代项目中已不可能触发。
为什么 display: inline 曾被误认为是“修复”
IE6 在 Quirks 模式下，当元素同时满足 float: left（或 right）、margin-left（或 margin-right）、且未声明标准 <!DOCTYPE html> 时，会错误地将横向 margin 计算两次。加 display: inline 并非真正修复，而是让 IE6 切换渲染路径，绕过 bug 触发逻辑。
但它带来副作用：vertical-align 失效、基线错位、与 flex/grid 父容器冲突、部分 CSS-in-JS 工具会警告或忽略该声明。
zoom: 1 和 *display: inline 是更稳妥的旧版写法
如果真要兼容 IE6/7（极少数遗留系统），优先用组合方案而非单写 display: inline：
立即学习“前端免费学习笔记（深入）”；
-
zoom: 1触发 hasLayout，不改变 display 语义，无对齐副作用，IE6/7 均支持 -
*display: inline是星号 hack，仅 IE6/7 解析，其他浏览器无视，比裸写display: inline更安全 - 二者常共用：
zoom: 1; *display: inline;，确保 IE6 下稳定绕过 bug - 避免用
_display: inline：下划线 hack 在某些 IE7 Quirks 模式下可能误触发，边界模糊
真正推荐的解法是避开触发条件本身
与其打补丁，不如从布局源头切断 bug 路径：
- 把
margin-left: 20px挪到父容器上，改用padding-left: 20px+overflow: hidden包裹浮动子项 - 用 wrapper 结构：外层 div 不浮动、设 margin；内层 div 浮动、不设横向 margin
- 改用
display: inline-block替代 float（需配合*display: inline; *zoom: 1;兼容 IE6） - 确认 HTML 开头有
<!DOCTYPE html>——90% 的“双倍边距”根本不会出现，因为页面已运行在标准模式
删掉历史遗留的 display: inline 很可能没副作用
如果你在代码里看到类似这样的规则：
.card { float: left; margin-left: 16px; display: inline; }
只要项目已强制标准模式（<!DOCTYPE html> 存在）、不支持 IE6、且构建流程未开启 Quirks 模式，直接删掉 display: inline 就行。它不会影响任何现代浏览器的渲染，反而消除了潜在的 vertical-align 和尺寸计算问题。
真正难处理的不是怎么写 CSS 让 IE6 不 double margin，而是怎么判断哪一行 display: inline 还活在 2006 年的思维里——尤其当它没注释、没上下文、又恰好卡在关键布局节点上时。
