IE6双空白边bug

在IE5.5，6下，如果一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)。那么会自动的加一倍变成20px。

如下html：在IE5.5，6下测试会发现marginLeft变成了20px

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style type="text/css"> #div2{     margin:0 0 0 10px;     float:left;     width:300px;     height:50px;     border:1px solid gray; } </style> <div style="border:1px solid red;">     <div id="div2">         IE6双空白边bug          </div>     <div style="clear:both;"></div> </div>

解决方法是给#div2加：display:inline,当然只针对IE6一下，可以使用下划线加属性-display:inline，这样只有IE6能识别了。

边距翻倍只有当元素的边距碰到包含块时才发生。当一个元素被浮动到另一个浮动元素时不会翻倍。另marginTop和marginBottom都不会翻倍。