IE 与 Firefox 的盒模型

最新推荐文章于 2020-12-17 03:39:37 发布

最新推荐文章于 2020-12-17 03:39:37 发布 · 197 阅读

文章标签：

#IE #Firefox #浏览器 #JavaScript #XHTML #ViewUI

xhtml / css 专栏收录该内容

47 篇文章

订阅专栏

本文通过两个实例对比了不同浏览器（IE6/7/8与Firefox3/3.5）在标准模式下对于盒模型中元素高度计算的区别，尤其是在子元素溢出及边距折叠方面的差异。

对于 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 撑大了