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

触发hasLayout引起的BUG

浏览:1419次  出处信息

在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元素透明的那些事    (阅读：2843)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：底部浮动条的一种兼容方案
后一篇：白话Block Formatting Context >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1