触发hasLayout引起的BUG

在IE6下面,很多显示的BUG都可以用触发hasLayout的方式去解决。但有种情况正好相反,触发hasLayout之后会产生显示的BUG。请看下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Demo</title>
	<style type="text/css">
		#div1 {
			background: red;
			margin: 10px;
			padding: 10px;
		}
		#div2 {		
			background: gray;
			margin: 30px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">TEST</div>
	<div>
</body>
</html>

上面的代码在所有浏览器里是正常显示的,包括IE6。但是给#div1设定宽度之后(触发hasLayout),经过大量测试,在IE6下#div1上面的padding会消失。有兴趣的同学可以看这篇文章:IE7-/Win: Margin collapsing and hasLayout

目前解决的办法就是去掉#div1的宽度,然后在#div1外面套一层div,在这个新div上设定宽度。解决问题的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Demo</title>
	<style type="text/css">
		#con {
			width: 400px;
		}
		#div1 {
			background: red;
			margin: 10px;
			padding: 10px;
		}
		#div2 {		
			background: gray;
			margin: 30px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="con">
		<div id="div1">
			<div id="div2">TEST</div>
		<div>
	</div>
</body>
</html>

触发hasLayout引起的BUG》上有2条评论

  1. dawenci

    这个bug比较有意思,实际上是外盒的padding-top和内盒的margin-top出现了类似“margin合并”的错误,而不是简单的外盒padding-top消失。感兴趣的话可以搜索这一文章:《IE7-/Win: Margin collapsing and hasLayout》

发表评论