技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 触发hasLayout引起的BUG

触发hasLayout引起的BUG

浏览:1416次  出处信息

在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>

建议继续学习:

  1. CSS实现HTML元素透明的那些事    (阅读:2835)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1