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

posted on 2011-03-07 20:25  snandy  阅读(678)  评论(2编辑  收藏  举报