IE6双空白边bug
在IE5.5,6下,如果一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px)。那么会自动的加一倍变成20px。
如下html:在IE5.5,6下测试会发现marginLeft变成了20px
<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都不会翻倍。