IE 与 Firefox 的盒模型

阅读更多

对于 IE quirk 模式下的盒模型就不说了，相信都很清楚，那就看看同处于标准模式下也有不同之处。

 

代码1：

 

 

 

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

 

 

 

附录：

 

 

脚本获得元素的视觉信息规范：CSSOM

 

 

 

1.相对定位下的所有属性图解

 

 

总结：

 

1.1 offsetWidth 等比 clientWidth 等多了边框和滚动条的计算。

1.2 offsetTop 等为当前元素 border 外侧到包含块 border 内侧的距离。

1.3 顺带说一下 getBoundingClientRect() 为当前元素 border 外侧相对浏览器视窗(即不包括滚屏长度)的位置 ，和浏览器模式无关

 

1.绝对定位

 

基本上同上图，但是 top 等定义为 当前元素 margin 外边到其包含块 border 内侧的距离。

 

 

 

 

 

• 
• 大小: 18.7 KB

• 
• 大小: 18.5 KB

• 
• 大小: 10.8 KB

• 
• 大小: 20.5 KB

• 
• 大小: 13.7 KB

• 
• 大小: 37.5 KB

• 查看图片附件