双倍外边距 bug 仅存在于 IE6 Quirks 模式，现代项目因 DOCTYPE 声明默认进入标准模式而无需修复；推荐从布局源头规避，如将 margin 移至父容器或改用 inline-block；document.compatMode 返回 "CSS1Compat" 时可安全移除 display: inline 等冗余样式。
双倍外边距 bug 只存在于 IE6 Quirks 模式
现在基本不用修——它根本不会在现代项目里触发。只要 HTML 开头有 ，浏览器就进标准模式，<code>float + margin 组合就不会 double margin。你看到的“修复方案”比如 display: inline，本质是让 IE6 切换渲染路径绕过 bug，不是真正修正逻辑，还附带 vertical-align 失效、与 flex/grid 冲突等副作用。
如果真要兼容 IE6/7，优先用 zoom: 1 + *display: inline
单写 display: inline 是危险的旧写法；更稳妥的是组合：
-
zoom: 1触发 hasLayout，不改 display 语义，IE6/7 都支持 -
*display: inline是星号 hack，仅 IE6/7 解析，其他浏览器无视 - 二者共用：
zoom: 1; *display: inline;，比裸写display: inline更安全
真正推荐的解法：从布局源头避开触发条件
与其打补丁，不如不给 bug 出现的机会：
- 把
margin-left: 20px挪到父容器上，改用padding-left: 20px+overflow: hidden包裹浮动子项 - 用 wrapper 结构：外层 div 不浮动、设 margin；内层 div 浮动、不设横向 margin
- 用
display: inline-block替代float（需配*display: inline; *zoom: 1;兼容 IE6）
检查是否真需要处理这个 bug
打开控制台执行：document.compatMode。如果返回 "CSS1Compat"，说明是标准模式，display: inline 这类“修复”纯属冗余，删掉反而更干净。很多老项目里还留着 .card { float: left; margin-left: 16px; display: inline; }，其实只删 display: inline 就行——它对 Chrome/Firefox/Safari/Edge 零影响，还能避免后续排版意外。
立即学习“前端免费学习笔记（深入）”；
