对于 IE quirk 模式下的盒模型就不说了,相信都很清楚,那就看看同处于标准模式下也有不同之处。
代码1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
test
</title>
</head>
<body>
<div id="t1" style="border:1px solid green;padding:100px;height:100px;width:100px;overflow:auto;">
<div style="border:1px solid red;padding:22px;height:300px;width:50px;margin:133px;" id="t2">
</div>
</div>
<script type="text/javascript">
alert('parent clientHeight :'+document.getElementById('t1').clientHeight
+'\n'+'parent offsetHeight :'+document.getElementById('t1').offsetHeight
+'\n'+'parent scrollHeight :'+document.getElementById('t1').scrollHeight
+'\n'+'parent clientWidth :'+document.getElementById('t1').clientWidth
+'\n'+'parent offsetWidth :'+document.getElementById('t1').offsetWidth
+'\n'+'child offsetTop :'+document.getElementById('t2').offsetTop
+'\n'+'child offset to parent :'+(document.getElementById('t2').getBoundingClientRect().top-document.getElementById('t1').getBoundingClientRect().top));
</script>
</body>
</html>
IE6 明显应该错误
子元素将父元素的 content 撑大了
IE7 , 8
子元素没有将父元素的 content 撑大了,但是父元素 scrollHeight 仍然增加了。
firefox
子元素没有将父元素的 content 撑大了,父元素 scrollHeight 也没有增加了,应该是对的。
代码2:
将上述代码的 t1 div 的 overflow 改为 auto
IE系列
子元素 margin-top 和父元素 padding-top 合并,取最大值133,但是 margin-bottom 没有和 父元素padding-bottom 合并,故得133+100=233,总的scrollheight= 133+22+300+22+2+233=712
更新2009-10-10:可能是BUG ,当父元素任何内容时,子元素 margin-top 和父元素 padding-top合并取最大值,但是当父元素有内容时,scrollHeight仍然计算错误,但是 getBoundingClientRect().top 父子差值正确了。
Firefox3
子元素margin-top和 父元素padding-top 没有合并,取133+100 ,但是 margin-bottom 和父元素 padding-bottom 都没了,取0,得 133+100+22+300+22+2=579
更新 2009-10-10 : 真的是 Bug ,firefox 3.5 修正了,margin-bottom 和 padding-bottom 又出来了,现在显示 scrollHeight : 819
附录:
1.相对定位下的所有属性图解
总结:
1.1 offsetWidth 等比 clientWidth 等多了边框和滚动条的计算。
1.2 offsetTop 等为当前元素 border 外侧到包含块 border 内侧的距离。
1.3 顺带说一下 getBoundingClientRect() 为当前元素 border 外侧相对浏览器视窗(即不包括滚屏长度)的位置 ,和浏览器模式无关
1.绝对定位
基本上同上图,但是 top 等定义为 当前元素 margin 外边到其包含块 border 内侧的距离。