修正“清除浮动”后产生的双倍下边距

为了让FF能撑开父容器,所以加入了一个清除浮动层,谁知道FF的问题解决了,IE却出了个双倍底边距的问题,上边空50,下面就会空100。试了常见问题中的“双倍边距”解决方法,没有作用。如果取消这个清除浮动层,问题消失,所以基本确定症结是浮动产生的混乱。

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
* {margin: 0px;padding: 0px;border: 0px;}
body {background-color: #480001;}
.book_list {padding: 100px; width: 720px;margin: 0 auto;background-color: #FF9900;overflow: hidden;}
.book_list_li {float: left;height: 170px;width: 330px;background-color: #990000;}
–>
</style>
</head>
<body>
<div>
<div><ul>
<li></li>
<li></li>
</ul></div>
<div style=”clear:both;”></div>
</div>
</body>
</html>

试了很多方法不行,无意给没有属性的DIV加上边框后问题消失,意识到可能是IE的haslayout问题。于是让“<div><ul>”中的DIV获得layout,设置属性,且高为1%就可以让他得到layout。显示正常。

发表评论

邮箱地址不会被公开。 必填项已用*标注