IE6 double margin-left Bug

在IE6下（标准模式/怪异模式），如果一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:15px)。那么会自动的加一倍变成30px。如下

<!DOCTYPE HTML>
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>IE6双空白边Bug</title>
</head> 
<body>
<div style="border:1px solid red;width:200px;">
	<div id="d1" style="margin:0 0 0 15px;float:left;border:1px solid gray;">
		IE6双空白边bug		
	</div>
	<div style="clear:both;"></div>
</div>
</body>
</html>

各浏览器中表现如下

IE7/8/9/Firefox/Safari/Chrome/Opera :

IE6:

解决方法是给div[id=d1]加：display:inline,当然只针对IE6一下，可以使用下划线加属性-display:inline，这样只有IE6能识别了。
边距翻倍只有当元素的边距碰到包含块时才发生。当一个元素被浮动到另一个浮动元素时不会翻倍。另marginTop和marginBottom都不会翻倍。

posted on 2011-03-15 10:07  snandy  阅读(3645)  评论(0)  编辑  收藏  举报