offsetHeight 不是自身元素的高度么?怎么会受前面浮动元素的影响呢?先看代码:
CSS 代码
*{font-size:14px;line-height:20px;}
#e1{float:left;width:100%;}
#e2{float:right;width:100%;}
#e3{width:100%;background-color:#f00;}
#e4{width:100%;background-color:#0f0;clear:left;}
HTML 代码
<div id="e1">eee</div>
<div id="e2">eee</div>
<div id="e3">eee</div>
<div id="e4">eee</div>
Firefox 中,效果如下:
IE 中,效果如下:
可以看出 Firefox 中的 e3 是从 e1 那里开始的,我们可以通过 JavaScript 来验证一下。
alert(document.getElementById("e1").offsetHeight);
alert(document.getElementById("e2").offsetHeight);
alert(document.getElementById("e3").offsetHeight);
alert(document.getElementById("e4").offsetHeight);
Firefox 中第三个显示为 60,其他全部为 20;IE 中全部显示为 20。这证实了前面效果图 e3 的问题。
结论
如果前面元素浮动了,后面的元素:
- 既没有 float(left、right 不重要);
- 也没有 clear(left、right 不重要)。
那么后面这个元素的 offsetHeight 就要小心了,它是从上面开始冒下来的。