IE 与 Firefox 的盒模型 - { focus : web } - ITeye博客

`

yiminghe

浏览: 1434187 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

luhouxiang：写的很不错，学习了
Extjs 模块化动态加载js实践
kingkongtown：如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
kissy editor 阶段体会
317966578：兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端
liuweihug： Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题
辽主临轩：怎么能让浏览器不进入文档模式的quirks模式，进入标准的
浏览器模式与文本模式

IE 与 Firefox 的盒模型

博客分类：

xhtml / css

IE Firefox 浏览器 JavaScript XHTML

阅读更多

对于 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 内侧的距离。

查看图片附件

分享到：

Web 前端细节 | scrollIntoView 实现

2009-05-20 01:34
浏览 1990
评论(0)
论坛回复 / 浏览 (0 / 2800)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

BlueBala » 兼容IE和Firefox的事件模型(拖动): BlueBala » 兼容IE和Firefox的事件模型(拖动)

IE6盒子模型没问题详测双倍边距: 2010-8-18 去腾讯面试，问IE6。...结论：标准模式时，IE6浏览器采用W3C盒子模型，此时IE6、Firefox表现一致。代码：复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional

IE与firefox下Dhtml的一些区别小结: 1.DOM上的接口基本上还是一致的，但经测试发现mozilla下的DOM更标准些,就算些法一样，IE下会有一些微小的区别，但无关要紧 2.事件模型上，这方面区别... mozilla下的e.which与ie下的event.keyCode相当相对应的还有e.l

IE和Firefox下event事件杂谈: 这也造成了在不同的浏览器中处理event的差异，这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码：代码如下: function doEventThing(eventTag){ var event = eventTag||...

纯CSS3制作iphone 6手机模型特效源码.zip: 本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。希望...

ie 开发调试工具三合一 companionjs debugbar(5.2) Internet.Explorer.Developer.Toolbar 天涯浪子: 做前端开发的过程中对JS的调试一直没有很好用的工具，所幸的是Firefox下的firebug的诞生给我们带来了数不清的方便，但是在IE下想要调教好JS还是一样的繁琐无奈，遵照IE提示的JS错误提示在代码里找到的却让人...

firefox下获取下列框选中option的text的代码: 因为安全问题 1、为firefox dom模型扩展属性 2、currentStyle属性可以取得实际的style状态 3、IE实现innerText时考虑了display方式，如果是block则加换行 4、为什么不用textContent？因为textContent没有考虑元素的...

让FireFox支持innerText的实现代码: 因为安全问题 1、为firefox dom模型扩展属性 2、currentStyle属性可以取得实际的style状态 3、IE实现innerText时考虑了display方式，如果是block则加换行 4、为什么不用textContent？因为textContent没有考虑元素的...

引用 js在IE与FF之间的区别详细解析: js调试工具推荐firefox的firebug插件能够给js设置断点执行能够运行时修改css样式查看dom模型等 ☆IE8自带的developerbar也很不错 ☆打开firefox所有js警告:在地址栏里录入:about:config双击,设置...

WEB浏览器兼容性开发宝典: 包含常见IE与Firefox兼容性问题的解决方案及示例，还有一个标准的DOM帮助文档。非常有助于前端WEB程序开发

权限管理系统源码2012918: 兼容IE 6、IE 8 和Firefox 3 等浏览器支持SQL Server、Oracle和MySQL等主流数据库支持的表关系模型包括 1、单表数据模型 2、自连接数据模型 3、一对多（父子表）数据模型 4、一对多数据模型中的一张表是自连接...

狼奔权限管理系统源码: 兼容IE 6、IE 8 和Firefox 3 等浏览器支持SQL Server、Oracle和MySQL等主流数据库支持的表关系模型包括 1、单表数据模型 2、自连接数据模型 3、一对多（父子表）数据模型 4、一对多数据模型中的一张表是自连接...

46种常见的浏览器兼容性问题大汇总: 7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body...

jsLinb —— 一个不错误的js框架（兼容jQuery, prototype, mootools等其他框架）: (IE6.0/IE7.0/firefox1.5/firefox2.0/opera9/Safari2.0，Safari缺乏测试)。它可以帮助程序开发者实现各种类型的RIA应用-在提供更加强大框架的同时更加易用。压缩的核心代码仅仅50k,包括了javascript类型检查，强制...

DESTOON B2B网站管理系统 v7.0 bulid0115.zip: DESTOON B2B网站管理系统简介 ...基于最新Web标准构建，在各主流浏览器(IE/FireFox/Opera等)上运行良好 DESTOON B2B网站管理系统前台截图 DESTOON B2B网站管理系统后台截图相关阅读同类推荐：站长常用源码

技术分析-再谈InternetExplorer8进程模型: 今天在网上看到了微软公布了一个IE8和其他2款浏览器：Firefox和GoogleChrome的速度对比的白皮书和视频，感叹于IE8的高效和稳定。首先我们看一下IE7的进程模型(图片引自于IE8TeamBlog)在Vista的IE7当中（注：不能是XP...

Global site tag (gtag.js) - Google Analytics