ie6/7双倍边距bug仅在quirks模式下触发，标准模式下无需修复；display:inline非修复而是历史误用，现代项目应删除，优先通过doctype、结构调整或经典clearfix解决兼容问题。
IE6/7 的浮动兼容性问题不是“修不修得好的问题”，而是“要不要继续用 float 的问题”。如果你的项目真要跑在 IE6/7 上，核心矛盾不在 CSS 写法，而在是否还值得为它们维持一套浮动逻辑。
IE6/7 双倍边距 bug 的真实触发条件
这个 bug 只在怪异模式（Quirks Mode）下生效。只要 HTML 顶部有 ，IE6 就走标准模式，<code>margin-left 根本不会翻倍。很多所谓“IE6 兼容失败”，其实是开发者工具里文档模式被手动降级成 IE6 Quirks —— 先按 F12 看一眼，不是这个模式，加 display:inline 没任何作用。
-
display:inline不是修复手段，只是怪异模式下碰巧绕过渲染缺陷的历史误用 - 它在标准模式下无效，且会让现代浏览器中元素丢失
width/height、破坏 Flex/Grid 子项对齐、让伪元素消失 - PostCSS 构建时可能删掉
*margin-left这类 hack，但会保留display:inline，变成静默污染源
父容器高度塌陷的稳妥清除方式
所有浏览器都会塌陷，但 IE6/7 不支持 ::after，所以现代 clearfix 写法直接失效。靠 overflow:hidden 虽简单，但容易意外裁剪弹层或触发滚动条。
- 推荐经典 clearfix：
.clearfix { *zoom: 1; }+.clearfix:before, .clearfix:after { display: table; content: ""; }+.clearfix:after { clear: both; } -
*zoom: 1是 IE6/7 专属 hack，仅它们识别，不影响其他浏览器 - 必须同时写
:before和:after，IE6/7 对单伪元素支持不稳定 - 避免空
<div style="clear:both"></div>：语义污染、line-height 为 0 时可能被忽略、维护成本高
图文混排时图片下方空白的根源与止血法
这不是 margin 或 padding 问题，而是浮动元素进入行内格式化上下文（IFC）后基线对齐导致的间隙，IE6 表现最明显。
- 最快止血：
img { display: block; }，彻底脱离行内流 - 若需文字环绕，设父容器
font-size: 0，再在文字上单独恢复字号（注意继承链） -
vertical-align在浮动元素上基本无效——IE6 不认，且浮动本身已脱离 line box，没 baseline 可对齐 - 别试图用
line-height或margin-bottom微调，这是治标不治本
真正难处理的不是怎么写，而是它藏在哪一行
display:inline 可能埋在某个 @import 进来的旧 reset.css 里，也可能在十年没动过的 header.less 中。没人知道哪一行正在悄悄撑开侧边栏。留注释比留代码重要，尤其是当它看起来毫无道理的时候——比如某行写着 /* IE6 double margin fix — but DOCTYPE is html5 */，这种就是该删的信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
