IE6、IE7 下的浮动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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#test { background:#0099FF; overflow:hidden; padding:5px; width:300px;}
.testblock { float:left; height:100px; width:100px; background:#000; margin-right:20px; margin-bottom:100px;}
</style>
</head>
<body>
<div id="test">
<div class="testblock"></div>
<div class="testblock"></div>
</div>
</body>
</html>
大家在心中勾画一下应该是什么结果呢？看一下在 IE6、IE7 下的显示把：
.testblock 的左 margin 起效，而下 margin 未起效，再来看看该段代码在 IE8、Firefox、Opera、Safari 以及 Google Chrome 下的显示：
两个 margin 都起效了，您可以通过各种浏览器打开这个页面查看效果。IE6、IE7 的下 margin 真的没有起效吗？我们再为 #test 添加两个内 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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#test { background:#0099FF; overflow:hidden; padding:5px; width:300px;}
.testblock { float:left; height:100px; width:100px; background:#000; margin-right:20px; margin-bottom:100px;}
</style>
</head>
<body>
<div id="test">
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
</div>
</body>
</html>
先来看看 IE6、IE7下的显示把：
上边两个 .testblock 的下 margin 起了作用，然后最下边的依然无效，再来看看 IE8、Firefox、Opera、Safari 以及 Google Chrome 下的显示：
显示依然正常，所有的 margin 均起了作用。您可以打开各种浏览器测试这个页面，观看效果。
那么现在我们在浮动元素下添加一个固定的元素，看看会是什么效果呢？
<!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>
#test { background:#0099FF; overflow:hidden; padding:5px; width:300px;}
.testblock { float:left; height:100px; width:100px; background:#000; margin-right:20px; margin-bottom:100px;}
#test_2 { clear:both; height:20px; background:#00CC33; width:100%; margin-bottom:100px;}
</style>
</head>
<body>
<div id="test">
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
<div id="test_2"></div>
</div>
</body>
</html>
大家可以看到，在所有浏览器下，这一段的显示是一样的，所有 .testblock 的 margin 都表现了出来。您可以在这个页面进行测试查看。
现在再对代码就行修改，我们将固定元素放到 #test 外部，不与 .testblock 同级，看看会如何：
<!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>
#test { background:#0099FF; overflow:hidden; padding:5px; width:300px;}
.testblock { float:left; height:100px; width:100px; background:#000; margin-right:20px; margin-bottom:100px;}
#test_2 { clear:both; height:20px; background:#00CC33; width:100%;}
</style>
</head>
<body>
<div id="test">
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
<div class="testblock"></div>
</div>
<div id="test_2"></div>
</body>
</html>
先来看看 IE6、IE7 下的显示把：
下边两个 .testblock 的下 margin 失效，再来看看 IE8、Firefox、Opera、Safari 以及 Google Chrome 下的显示：
.testblock 的所有 margin 都有效，您可以在这个页面查看。
至于最后这段代码中的 #test_2 的下 margin 是否起效，相信大家都知道，不知道的可以自己测试一下。
那么我们最后得到了什么结论呢？在 IE6、IE7 下的浮动元素，如果该浮动元素下方有同级的元素，不管是浮动还是固定的，该浮动元素的下 margin 有效，倘若下方无元素，该浮动元素的下 margin 将不起效，即为 0。这就造成了一个问题，当我们拍一大串浮动的元素时，倘若换行了，改如何去消除下 margin 这个 bug 呢？
方法一：放弃使用浮动，改用 display:inline-block，不清楚的可以参照http://www.12sui.cn/blog/138.html。
方法二：为所有的浮动元素的父级固定一个高度，并设置 overflow:hidden。
方法三：可以在浮动元素末尾添加一个空的 div 以消除影响。
方法四：首先定义在现代浏览器下的正常显示，然后使用 *+html 定义在 IE7 下的显示，然后通过条件注释单独定义 IE6 的 CSS。
这篇文章发布于 2008年10月4日，星期六，12:13，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
