IE6/7下设置padding-bottom时出现的Bug(转)

hl756799782

浏览: 77396 次
性别:
来自: 深圳

最近访客更多访客>>

fv3386

xiumoo

jaycs1723658

zhouzonglisrj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS

原文链接：http://bbs.itzcn.com/thread-17546-1-1.html

在使用DIV+CSS设计网页时，经常需要层嵌套层的情况。我使用padding-bottom属性和padding-top属性为外层DIV设置间距，具体代码如下所示：

<html>   
<head>   
    <meta charset="utf-8">   
     <title>IE6/7 double padding-bottom Bug</title> 
<style>
#div1{
border:1px solid red;
width:300px;
padding-bottom:15px;
padding-top:15px; 
padding:0; 
}
</style>
</head>
<body>
<div id="div1 ">  
     <div style="float:left;border:1px solid gray;">  
         IE6/7 double padding-bottom Bug   
     </div>  
     <div style="clear:both;"></div>  
</div>  
</body>  
</html>

我在外层div分别为对象的上间隙和下间隙加了15px，该段代码在IE8以及其他一些主流浏览器下运行正常，可是在IE6/7以及IE8/9（怪异模式）下，div的下间隙却翻倍了，如图所示。请问应该如何解决？

------------------------------------------------------------------------------------------------------------------------------------------------

这个Bug是由于清除浮动的DIV给撑大的。在IE6/7默认情况下，div都有一个默认的高度，所以为该div设置如下代码就会解决问题：

overflow:hidden; height:0;

其实，清除浮动的方法这并不是最好的方法，因为它产生了冗余标签。我觉得让其父级元素来清除浮动更合适，给其父元素添加：

{overflow:auto; zoom:1;}//IE
#div：after {display:block; visibility:hidden;clear:both;height:0; content:"/20";}

after伪元素在IE下无效果，所以不影响IE的兼容代码。或许这也不是最优的方法，但现在这是网上流传的比较多。

分享到：

前端开发——海量图片加载（转） | 生命中的下一个7年，你打算如何度过（转)

2013-06-03 20:38
浏览 1349
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论