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能识别了。

 

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