|
锁定老帖子 主题：IE 与 Firefox 的盒模型
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-05-20
最后修改：2010-11-24
对于 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 内侧的距离。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 2825 次
