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

`

yiminghe

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

最近访客更多访客>>

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
浏览 2023
评论(0)
论坛回复 / 浏览 (0 / 2825)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

IE与Firefox的CSS兼容大全: 8. **盒模型差异**：Firefox和IE对盒模型的解释不一致，可以通过重置`margin`和`padding`来解决。例如，使用`margin:30px!important;margin:28px;`的顺序来覆盖IE的默认行为。 9. **IE5和IE6的盒模型**：IE5计算...

BlueBala » 兼容IE和Firefox的事件模型(拖动): 本文将深入探讨如何创建一个兼容Internet Explorer（IE）和Firefox浏览器的事件模型，特别是在实现拖动功能时所面临的挑战和解决方案。首先，我们需要理解IE和Firefox在事件处理上的差异。在IE中，事件处理主要...

ie与firefox兼容文档: 3. **盒模型差异**：IE使用“怪异盒模型”，其中边框和内填充包含在元素宽度内，而Firefox和其他现代浏览器遵循“标准盒模型”，边框和内填充不计入宽度。这会导致元素大小计算的差异。 4. **DOCTYPE声明**：...

IE6.0、IE7.0 与FireFox CSS兼容的解决方法: 7. **盒模型差异**：IE和Firefox对盒模型的理解不同。为了解决边距问题，可以使用如下技巧：`div{margin:30px!important;margin:28px;}`。IE会忽略`!important`，因此会使用最后的`margin`值，其他浏览器则会使用`!...

IE与Firefox的CSS兼容大全.rar: "IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容性问题的资源集合，旨在帮助网页开发者解决在跨浏览器设计时遇到的难题。首先，IE浏览器，尤其是早期版本，如6、7和8，对于CSS标准的支持并不完全。...

IE和firefox调试插件: 调试JavaScript是网页开发中的重要环节，无论是在IE还是Firefox中，这些插件都提供了强大的JS调试功能。你可以设置断点，查看变量值，跟踪调用栈，这极大地提高了调试效率。对于CSS和HTML，开发者可以直接在页面上...

让IE和火狐同时兼容: 特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

difference between IE and Firefox: - IE和Firefox对DOM（文档对象模型）的理解和操作方式不同，比如IE的`document.all`与Firefox的`document.getElementsByTagName`。 - 在事件处理上，IE使用attachEvent，Firefox使用addEventListener，需要编写...

IE与Firefox的事件区别: 总结起来，IE和Firefox在事件处理上的主要差异在于事件流的支持和处理函数的添加与移除方式。理解这些差异对于编写兼容性良好的JavaScript代码至关重要。开发者需要根据目标用户群体的浏览器分布情况，适当地采用...

Javascript的IE和Firefox兼容性问题集合: 然而，由于不同的浏览器对JavaScript的支持程度和实现方式存在差异，尤其是Internet Explorer（IE）和Firefox这两款流行浏览器，开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...

IE与Firefox的CSS兼容问题: ### IE与Firefox的CSS兼容问题：web2.0经验总结在Web开发中，确保不同浏览器之间的CSS兼容性是一项挑战性的任务，尤其是在处理Internet Explorer（IE）与Firefox这两种具有显著差异的浏览器时。本文将深入探讨IE与...

CSS兼容IE和Firefox的技巧集合.rar: 例如，IE常常遵循其自己的盒模型，而Firefox等现代浏览器遵循W3C的标准盒模型。这就导致了元素宽度和边距计算的不同，可能会影响整体布局。 1. 盒模型问题：IE6及以下版本使用“怪异盒模型”，其中`width`包含内...

IE和Firefox差异参考大全: 1. `Box Model`差异：IE采用“包容盒”模型，其中内容宽度加内边距和边框等于总宽度，而Firefox遵循W3C标准的“内容-边界”模型，内容宽度不包含内边距和边框。因此，设置宽度时需要特别注意。 2. `hasLayout`概念...

IE6盒子模型没问题详测双倍边距: 然而，IE6在某些情况下采用了不同的盒子模型，这导致了与遵循W3C标准的其他浏览器（如Firefox）的显示差异。首先，我们来看IE6在标准模式下的盒子模型。当声明文档类型（DOCTYPE）为XHTML 1.0 Transitional或更...

浏览器兼容(支持IE和firefox): 4. **浮动元素的清除**：IE6对浮动元素的处理与Firefox不同，可能需要使用`clearfix`类或者`zoom: 1`来触发hasLayout机制。 5. **盒模型**：IE6使用自己的盒模型，而其他浏览器遵循W3C标准盒模型。可以通过设置`box...

CSS兼容IE和Firefox的技巧集合: IE6、7使用了其独有的“怪异盒模型”，其中元素宽度包括了边框和内填充，而Firefox等其他浏览器遵循W3C标准的盒模型，宽度仅包含内容区域。为解决此问题，可以使用`box-sizing`属性，将其设置为`border-box`使所有...

解决CSS在IE与火狐下的兼容问题: - **盒模型差异**：IE采用的是包含边距和边框的盒模型，而Firefox等其他现代浏览器遵循W3C标准，边距和边框不计入元素宽度。为解决此问题，可以使用`box-sizing`属性设置为`border-box`。 2. **CSS Hack策略** - ...

Global site tag (gtag.js) - Google Analytics