IE 与 Firefox 的盒模型

对于 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

 

 

 

附录:

 

 

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

 

 

 

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

 

 

总结:

 

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

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

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

 

1.绝对定位

 

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

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值