IE6下float元素左边距/上边距加倍是box模型解析bug，因浮动块级元素被误按inline元素计算边距；需同时满足float、设margin且父容器未触发hasLayout；加*display:inline可绕过该bug，但父容器也须触发hasLayout（如zoom:1）。
IE6下float元素左边距/上边距变成两倍？这是box模型解析bug
IE6对display为block的浮动元素（尤其是float:left）会错误地将margin-left或margin-top加倍渲染，典型表现是元素明显右偏或下移——不是代码写错了，是IE6把“已设浮动”的块级元素当成“需要触发hasLayout的inline元素”来算边距。
根本原因在于IE6的layout机制和浮动处理逻辑耦合太深：当一个block元素同时满足“浮动”+“有横向margin”，且父容器没触发layout时，它会误用inline元素的边距计算路径。
- 只影响IE6，IE7+及所有现代浏览器完全不受影响
- 常见于导航菜单、侧栏模块、图片左浮动配文字环绕等场景
- 必须同时满足：元素
float:left（或right）、设置了margin-left（或margin-right）、父容器未触发hasLayout（如没有zoom:1或height等）
为什么加display:inline能修？它不改变布局行为
display:inline本身不会让浮动元素变“行内”，因为float会强制元素生成块框；但它在IE6中是一个副作用明确的“hasLayout触发器+边距重置开关”：一旦元素被声明为inline，IE6就放弃对它的块级边距双倍计算逻辑，转而用inline元素的边距规则（此时margin仍生效，但不加倍）。
这不是语义修复，是利用IE6内部渲染分支的漏洞绕过。它不改变最终视觉布局结构，只修正了那个错乱的数值。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
float声明之后，否则IE6可能忽略display:inline - 不能单独使用，需配合
float，否则元素会退化为纯inline，失去浮动效果 - 不影响其他浏览器：现代浏览器会优先尊重
float，display:inline被自动忽略或降级处理
更稳妥的写法：用*display:inline做IE6专属hack
直接写display:inline虽有效，但会污染其他浏览器的CSS校验（尽管实际无害）。更干净的做法是用IE6识别的私有前缀*display，让只有IE6读取并应用该声明。
nav li {
float: left;
margin-left: 10px;
*display: inline; /* 仅IE6生效 */
}-
*display是IE6/IE7都支持的hack，但IE7已修复双倍边距问题，所以实际只对IE6起作用 - 避免用
_display（IE6专用），因部分IE7标准模式下也可能误触发 - 如果项目还需兼容IE7 quirks mode，可加
_display:inline兜底，但多数情况不需要
别忘了父容器也要hasLayout，否则子元素补丁可能失效
即使子元素加了*display:inline，如果父容器自身没触发hasLayout（比如空的div、无宽高无内容的容器），IE6仍可能在父级层面产生渲染错位，导致子元素位置漂移看起来像“补丁没起作用”。
简单加zoom:1是最轻量的父容器hasLayout触发方式，不影响布局流。
- 给浮动元素的直接父容器加
zoom:1（IE专有，其他浏览器忽略） - 不要用
height:1%之类可能引发高度塌陷的方案 - 若父容器已有
overflow:hidden或border等可触发hasLayout的属性，则无需额外处理
这个细节最容易被忽略：你修好了子元素，却忘了父容器在IE6里本来就是“半瘫痪”状态。双倍位移从来不是单点问题，而是父子两级layout状态共同决定的。
