IE6双空白边bug

时间：2011-03-07 来源：snandy

在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;
        
        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都不会翻倍。

相关阅读更多 +