南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » margin http://www.12sui.cn 南芝的前端技术学习经验 Sun, 08 Jan 2012 09:22:09 +0000 en hourly 1 http://wordpress.org/?v=3.2 IE6、IE7 下的浮动bug http://www.12sui.cn/develop/ie6%e3%80%81ie7-%e4%b8%8b%e7%9a%84%e6%b5%ae%e5%8a%a8bug/ http://www.12sui.cn/develop/ie6%e3%80%81ie7-%e4%b8%8b%e7%9a%84%e6%b5%ae%e5%8a%a8bug/#comments Sat, 04 Oct 2008 04:13:36 +0000 南芝 http://www.12sui.cn/?p=168 开门见山，我们首先看一下代码：

<!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。

]]> http://www.12sui.cn/develop/ie6%e3%80%81ie7-%e4%b8%8b%e7%9a%84%e6%b5%ae%e5%8a%a8bug/feed/ 0