IE6/7下设置padding-bottom时出现的Bug(转)
原文链接：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的兼容代码。或许这也不是最优的方法，但现在这是网上流传的比较多。
