IE6/7双倍边距仅在怪异模式下触发，加display:inline非修复而是历史误用；标准模式下无效且污染现代布局，应删或用display:block!important覆盖，并优先通过结构调整（如改用padding）避开触发条件。
IE6/7双倍边距只在怪异模式下出现，先看文档模式
加 display:inline 不是万能解药，它只在 IE6/7 的 Quirks 模式（怪异模式）下“碰巧”绕过 bug。只要 HTML 开头有 <!DOCTYPE html>，IE6 就走标准模式，margin-left 根本不会翻倍。很多项目显示“IE6 兼容”，其实是开发者工具里文档模式被自动降级成 “IE6 Quirks”——先按 F12 看一眼，不是这个模式，display:inline 加了也白加。
display:inline 在标准模式下无效，且会污染现代布局
display:inline 和 float 共存，在标准模式中既不修复 bug，也不改变渲染行为，纯属冗余。更麻烦的是：它会让元素在 Chrome/Firefox 中丢失 height、width 声明效果，导致 Flex/Grid 子项错位、伪元素消失、vertical-align 失效。PostCSS 构建时可能直接删掉带 * 或 _ 的 hack，但 display:inline 会被保留下来，变成静默污染源。
- 检查现有 CSS，批量删除所有
float+display:inline组合 - 用 stylelint 配
declaration-property-value-blacklist拦截这类规则 - 删不掉就用
display:block !important覆盖（IE6 支持!important）
真要兼容 IE6/7，优先改结构，别硬修 CSS
靠 CSS hack 补丁兜底风险高：zoom:1、overflow:hidden、display:inline-block 容易互相干扰，尤其在 hasLayout 机制混乱的老 IE 里。更稳的做法是避开触发条件本身：
- 把
margin-left: 10px从浮动元素上拿掉，挪到父容器设padding-left: 10px - 包一层非浮动的
<div>，外边距落在 wrapper 上 - 避免连续多个
float:left并排——IE6 只对第一个元素双倍，但后续维护者看不懂为什么只修第一个
真正难处理的不是怎么加 display:inline，而是它藏在哪一行
它可能埋在某个 @import 进来的旧 reset.css 里，也可能在十年没动过的 header.less 中。没人知道哪一行 display:inline 正在悄悄撑开 IE6 下的侧边栏。留注释比留代码重要，尤其是当它看起来毫无道理的时候。
立即学习“前端免费学习笔记（深入）”；
