触发hasLayout引起的BUG
五月 19, 2010
by 小寒 2 comments
在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>
（IE6的截图）
（IE6的截图）