IE6、IE7 下的浮动bug at 2008.10.4 12:12
开门见山，我们首先看一下代码：
<!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，看看会是什么效果：