IE6/IE7之空元素拥有layout就获得了高度bug

IE6/IE7之空元素拥有layout就获得了高度bug

影响版本
这个bug影响: IE7, IE6

症状
空元素拥有layout就获得了高度。

描述
我发想的另一个bug. 这个例子可能很打击那些应用clearing元素（例如<div style="clear:both"></div）来清除浮动的人 . 让我们看一下例子:

例子
可用的例子在 separate page

HTML Code:
<div></div>
CSS Code:
div {
    background: blue;
    width: 100%; |* to give "layout" *|
}
我们有一个空的块级元素 <div>. 在css中我们通过设置 width 属性使他拥有 "layout" 同时设置 background 为蓝色. 因为元素是空的, 理性的浏览器会让她的高度为0px; IE6 and IE7 显然认为这里有一个魔幻的空间同时渲染成蓝色并赋予他一个与字体大小近似的高度；

解决
修正版本
所有版本

描述
这是一个以火灭火类型的bug.我们将通过明确提醒的方式来修复IE，并确保不会造成到其它问题. 让我们看一下:

修正的例子在 separate page

HTML Code:
<div></div>
CSS Code:
div {
    height: 0;
    overflow: hidden;
    background: blue;
    width: 100%; |* this is just what we originaly had as "layout" giver *|
}
我们的标记和以前一样; 在css中我们增加了 height property 并设置它为0px，这修正了IE7的bug. 由于IE6是高发bug的浏览器，所以我们仍然添加 overflow property 并设置为 hidden IE6中的上述错误

转载自：http://hi.baidu.com/jinwei_zhiyuan/item/fa927c3ea1c2ecf72784f4ad