IE中的空DIV容器高度不是 0 的解决方法

有没有想过，一个空的 DIV，没有任何内容，高度特性(‘height’) 没有被设置或者是 “auto”，这时候，计算后的高度应该是多少，是 0 吗?

经常会遇到这么个问题，浮动的清除，需要一个空的 div 上设置 clear 来实现，但在IE中会莫名的出现空行。

测试代码：

<div style="width:200px; background-color:silver;"> 
    <div style="float:left; height:50px; background-color:red;">float</div> 
    <div style="zoom:1; clear:both;"></div> 
</div> 
<div style="width:200px;background-color:green;">normal div</div> 

银色背景的div里面有一个浮动的子元素，浮动子元素下面紧接着是一个清除浮动的空 div。你想问 zoom:1 是干什么用的?…………一会儿你就知道了。

按道理说，银色的div高度应该跟它里面的浮动子元素高度相等，所以红块和绿块应该是上下相邻的关系。实际是怎么样的呢?

截图：

 

IE 再一次挑战了我们的想象力。仔细观察你会发现，IE中空出的部分，就是那个空的 DIV。

继续思考一个问题，空的 DIV 的高度，应该是0吗?

让我们来看看 W3C 标准中怎么说的。

空 DIV 的高度计算值

块级非替换元素的高度跟它的子元素的高度有关。

如果一个块级非替换元素没有任何子元素时，它的 auto 高度的计算值应该是0。

关于块级非替换元素高度计算规则，请参考 W3C CSS 2.1 规范 10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

zoom值的疑惑

为什么上面例子中特意给空 div 加一个 zoom 值呢?

这是因为zoom值可以触发hasLayout。

具体知识，参见这个帖子：http://topic.csdn.net/u/20100810/16/1909628f-ebf6-4e87-b6a0-649ef10de5d4.html?02823450055253114

恢复正常的空 div

去掉 zoom 后：

<div style="width:200px; background-color:silver;"> 
    <div style="float:left; height:50px; background-color:red;">float</div> 
    <div style="clear:both;"></div> 
</div> 
<div style="width:200px;background-color:green;">normal div</div> 

各浏览器表现一致：

div 空行高度的疑惑

看来，问题的关键就在是否触发hasLayout上。

再仔细的观察你会发现，那个空行跟绿色的行的高度类似，为什么呢?是否这个行的高度与 文字的大小有关呢?

看一个详细的测试用例：

<style type="text/css"> 
    div div {  
       background-color: red;  
    }  
</style> 
<div id="Container" style="border:1px solid blue; width:400px;"> 
    div[font-size:30px;] hasLayout == false  
    <div id="DIV1" style=" font-size:30px;"></div> 
    div[font-size:30px;] hasLayout == true  
    <div id="DIV2" style=" font-size:30px; zoom:1;"></div> 
    div[font-size:15px;] hasLayout == true  
    <div id="DIV3" style=" font-size:15px; zoom:1;"></div> 
    div[font-size:0px;] hasLayout == true  
    <div id="DIV4" style="font-size:0; zoom:1;"></div> 
    <br/> 
</div> 

截图：

问题大概明了了

在IE6/IE7/IE8(Q) 触发了 hasLayout 的空块级非替换元素的高度不是0，并且和font-size有关。

但是，即使设置了 font-size:0 也没有办法让空 DIV 的高度为 0，那要怎样才能让它的高度与其他浏览器中一致呢?

答案是：给它加一个空的没有触发hasLayout的子元素。

<div style="zoom:1; background-color:red;"> 
    <div></div> 
</div> 

或者：

<div style="zoom:1; background-color:red;"> 
    <!-- --> 
</div>