CSS中margin属性在IE6中的双倍浮动bug

当元素浮动并且定义了与浮动及书写方向一致的margin，这时，在IE6下margin值将表现为指定值的双倍，如果同一个包含块内有多个子元素浮动，那么只有和浮动方向一致元素的margin才会双倍，并且该元素是浮动方向上的第一个元素，这种情况目前在IE6中会存在，由于目前在浏览器市场IE6的市场份额还有不少，所以分享出来，也希望大家能够了解和学习。

但是能真正触发产生margin属性双倍浮动的情况只会有三种情况，分别为：

1. block和list-item元素
2. 定义了浮动
3. margin定义与浮动及书写方向一致

通过试验，我们发现了 block | list-item | inline | inline-block 4种元素的情况，因为IE6都不支持。准确的说只有 block和list-item元素才能触发其实是不严谨的，应该说是 block level 都会触发。

简单说明一下几个概念吧：

1. block level elements 块级元素
2. inline level elements 行内级元素
3. block elements 块元素
4. inline elements 行内元素
5. 块级元素包含block(块元素)，list-item，table等元素
6. 行内级元素包含inline(行内元素)，inline-block，inline-table等元素

解决方案

虽然我们无法知道IE6的排版引擎在实现上为什么会有此Bug，但通过对触发条件的验证，我们知道了此问题只有block level元素才会触发，也就是说我们只需要修改display属性为非block level即可。同时，我们知道IE6只支持display属性的：none | inline | block | list-item | inline-block 5个值；而且对inline-block的支持只体现在行内元素上，行内元素不触发该Bug，于是没场景使用；你又不可能将元素隐藏，那么就只剩下inline可选。于是双倍边距Bug的最终解决方案只能是：

display:inline

其它

至于触发条件里的 margin定义与浮动及书写方向一致 是什么意思呢？这里只简单说一下，直接看代码比较容易：

.demo{*zoom:1;overflow:hidden;background:#f00;}
.demo .item{margin:0 15px;padding:5px 10px;background:#aaa;}
.demo .item1,.demo .item2{float:left;}
.demo .item3,.demo .item4{float:right;}

<div class="demo">
	<div class="item item1">子项一</div>
	<div class="item item2">子项二</div>
	<div class="item item3">子项三</div>
	<div class="item item4">子项四</div>
</div>

这说明了什么呢？

首先说明双倍margin的方向和浮动方向有关，因为item1是左浮动，所以左边距才双倍，item3是右浮动，所以右边距才双倍；
其次，item1和item3分别是包含块demo中左浮动和右浮动中的第1个离包含块边界最近的子元素，它们的margin双倍了，但item2和item4却没有双倍，这表示说包含块中只有和浮动方向一致的第1个子元素才会触发双倍边距。

这就是IE6浮动双倍边距的全部吗？

答案当然不是，因为margin-top和margin-bottom也会双倍。

总结

所以大家在学习前端时候，需要多努力去了解每个兼容的问题，想细想深，多实践。