【分享】IE 中触发 hasLayout 的空 DIV 高度竟然不是 0

WebAdvocate 2010-08-31 05:17:13
加精
有没有想过,一个空的 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>


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

更多兼容性问题:
【分享】浏览器兼容性问题目录
...全文
2055 63 打赏 收藏 转发到动态 举报
写回复
用AI写文章
63 条回复
切换为时间正序
请发表友善的回复…
发表回复
mochimo 2010-09-08
  • 打赏
  • 举报
回复
haslayout后父容器会根据font-size建立line box吧,高度又是auto,因此父容器根据唯一的line box计算出了实际height值。
sunboyqq23 2010-09-05
  • 打赏
  • 举报
回复
好东东,学习了...
shmilyweng 2010-09-04
  • 打赏
  • 举报
回复
不错不错。。万恶的IE
tbc808342 2010-09-04
  • 打赏
  • 举报
回复
不错不错Z@~~~
netehoney 2010-09-03
  • 打赏
  • 举报
回复
sunboyqq23 2010-09-03
  • 打赏
  • 举报
回复
不错,不错。。。。。。
zhaoqiliang527 2010-09-03
  • 打赏
  • 举报
回复
学习啦!O(∩_∩)O~
ml05061232 2010-09-03
  • 打赏
  • 举报
回复
学习了
qwo8989089 2010-09-03
  • 打赏
  • 举报
回复
好像有点麻烦啊哈哈
morgan_lee 2010-09-02
  • 打赏
  • 举报
回复

不太懂 路过看看
okwood 2010-09-02
  • 打赏
  • 举报
回复
是IE的bug,IE认为外部容器的高度不能小于字体的行高。当设置的容器的height小于行高时,会自动以line-height的值作为容器的高度。
leezen 2010-09-02
  • 打赏
  • 举报
回复
学习了
cengshilieren 2010-09-02
  • 打赏
  • 举报
回复
学习中~~
weiwodz 2010-09-02
  • 打赏
  • 举报
回复
有喜欢玩的朋友可以去瞧瞧!
liuyicheng2 2010-09-01
  • 打赏
  • 举报
回复
很有意思的东西 顶一下
fhqzsw 2010-09-01
  • 打赏
  • 举报
回复
好东西啊。
flame_jf 2010-09-01
  • 打赏
  • 举报
回复
不错,不错,赞一个。
hbedhoop 2010-09-01
  • 打赏
  • 举报
回复
有用,谢谢
draglonglong 2010-09-01
  • 打赏
  • 举报
回复
学习分享。。。
sunboyqq23 2010-09-01
  • 打赏
  • 举报
回复
学习了。。。。
加载更多回复(36)

5,006

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧