IE 中触发 hasLayout 的空 DIV 高度竟然不是 0

【分享】IE 中触发 hasLayout 的空 DIV 高度竟然不是 0
有没有想过，一个空的 DIV，没有任何内容，高度特性(‘height’) 没有被设置或者是 “auto”，这时候，计算后的高度应该是多少，是 0 吗？
经常会遇到这么个问题，浮动的清除，需要一个空的 div 上设置 clear 来实现，但在IE中会莫名的出现空行。
测试代码：

HTML code

<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 后：

HTML code

<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上。
再仔细的观察你会发现，那个空行跟绿色的行的高度类似，为什么呢？是否这个行的高度与 文字的大小有关呢？
看一个详细的测试用例：

HTML code

<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的子元素。

HTML code

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

或者：

HTML code

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

小心空的DIV元素
注意，让空的DIV触发hasLayout可能会引起较大的布局问题，要慎之又慎……

更多兼容性问题：
【分享】浏览器兼容性问题目录

[解决办法]
不错不错，正在验证尝试中
[解决办法]

没有使用过，学习一下
[解决办法]
看不懂 还是努力看一下 有没有作用呢
[解决办法]
学习了
[解决办法]
JJ恩 非常不错 学到了 谢谢
[解决办法]
哈哈，厉害yukuninfoaxiom，又发布资料了！真不错！把这些知识总结成一本书，出书吧，我第一个买！
[解决办法]
两黑猫 学习了
[解决办法]
good job!

查看更多 下一篇