IE 与 Firefox 的盒模型

最新推荐文章于 2018-09-28 18:23:14 发布
最新推荐文章于 2018-09-28 18:23:14 发布
阅读量151 收藏
点赞数
分类专栏： xhtml / css 文章标签： IE Firefox 浏览器 JavaScript XHTML ViewUI

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

 

 

 

 

 

iteye_4865
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE盒子模型和标准W3C盒子模型
09-27
而其他浏览器（如Firefox、Chrome等）则遵循W3C标准，使用标准盒子模型。 为确保跨浏览器的兼容性和一致性，开发者通常会在HTML文档的顶部添加DOCTYPE声明，如`<!DOCTYPE html>`，这会指示浏览器以标准模式渲染页面...
盒子模型（BOX Model) 在IE和Firefox中的区别
weixin_30300523的博客
09-24 315
刚接触用Div布局时，许多人都只针对IE开发。但随着其他标准浏览器在市场中出现的比重越来越大、人们对于标准越来越重视，目前针对W3C进行开发、对IE系列进行兼容已经成为主流。Div标签，作为标准化Web应用来说，已经成为最重要一个名词。甚至在网络上经常出现“DIV+CSS”这类词语来表示标准化Web开发。曾经在给一个老网站做兼容Firefox时出现一个问题，现在看来这完全不是问题，但在当时着实费了...
IE、Firefox、Opera对盒模型解释的比较和浏览器兼容性
weixin_30735745的博客
10-16 151
盒模型是WEB页面排版定位的核心，正是由于不同的浏览器对盒模型的解释不一，造成同样的CSS设计代码在不同的浏览器上有不同的表现。那么差异到底有多大，网上也没有一个直观的具体的数据可供参考，因此才有了这个盒模型比较数据。 既然要比较，必然要有一个标准，所以，在比较开始之前，先来了解一下W3C标准盒模型解释。 W3C标准盒模型 一个标准的盒模型由margin，boder...
css核心-盒子模型（Box Model）整理
赠人玫瑰,手留余香.
02-28 2573
1、对盒子模型的不同解释      这里IE6、IE8、IE9相同，火狐和谷歌、遨游等相同。先说盒子模型，CSS将所有的HTML块元素都看成是一个盒子（box),每个盒子有以下几个组成部分：Content(内容）、Padding（补白）、Border（边框）、Margin（边界）。火狐谷歌等较新的的浏览器实行加法运算，“向外扩张”。以高度为例，CSS中设置的高度为内容的高度，当增大padding
chrome、高低级IE以及火狐的各种适配
qq_42129143的博客
06-13 2859
一、得到计算后样式高级浏览器的写法（低版本IE不兼容）：window.getComputedStyle（box）.getPropertyValue（'width'）;可以简写成：getComputedStyle（box）['width'];低版本IE的写法（高级浏览器不兼容）：box.currentStyle.width 或者 box.currentStyle[‘wi...
盒模型和总结
jinqianwang的博客
05-21 405
盒模型：包含有外边距margin 和内边距padding 边框border和内容element盒子的宽/高=margin*2+padding*2+border*2+element也就是一个模型的总长度是所有的边距加盒子边框的粗度和元素本体的宽高margin的方法：margin-topmargin-rightmargin-bottommargin-leftmargin: top right bott...
IE6盒子模型没问题 详测双倍边距
09-25
然而，IE6在某些情况下采用了不同的盒子模型，这导致了与遵循W3C标准的其他浏览器（如Firefox）的显示差异。 首先，我们来看IE6在标准模式下的盒子模型。当声明文档类型（DOCTYPE）为XHTML 1.0 Transitional或更...
IE与Firefox的CSS兼容大全 推荐
09-25
在互联网技术领域，网页设计师和前端开发工程师常常会遇到不同浏览器对CSS样式的解析存在差异的问题，尤其是IE（Internet Explorer）和Firefox（火狐）这两款主流浏览器之间的兼容性问题。CSS（层叠样式表）作为网页...
IE与firefox下Dhtml的一些区别小结
09-05
然而，不同的浏览器对DHTML的支持存在差异，尤其是在Internet Explorer（IE）和Firefox之间。以下是对这些差异的详细说明： 1. DOM（文档对象模型）接口： 尽管在IE和Firefox下DOM接口基本相同，但在实现上Firefox...
（浮动+盒模型+ul列表 ） 分析火狐首页布局
海涛高软
10-08 742
今天分析的是下面的这张图： 下面这张图实现思路分析，上边导航条是一个大的div,div里面放的是一个ul列表，然后对每一个li项做左浮动，再配合盒模型将位置分开，下边是一个大的div 下面这张图实现思路： 绿色方框，每一个方框是一个div 上边绿色方框内部，分左右两栏，左栏是一个ul里列表，右栏中放入两个ul列表 下边绿色方框，也分左右两栏，左栏中又分两个div,上面的div又分两栏，下面
常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
weixin_34361881的博客
09-02 204
什么是浏览器兼容问题？所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 总结一下我编写代码的时候遇到的浏览器兼容问题，跟大家学习。 一、解决无法在IE6下面设置1px高...
盒子模型总结
zm_android_team的博客
09-28 250
引用自 https://www.cnblogs.com/tugenhua0707/p/5180841.html 定义容器的display属性： .box{ display: -webkit-flex; /*webkit*/ display: flex; } 容器样式 .box{ flex-direction: row | row-reverse | column...
盒子模型
陈小栋的博客
08-27 882
在“盒子模型”中，页面中的所有元素都可以看成一个盒子（没错，行内元素也是一个盒子），并且占据着一定的页面空间。盒子模型由content(内容)，padding(内边距)，border(边框)，margin(外边距)这四个属性组成，此外，在盒子模型中还有宽度width和高度height这两辅助属性。整个盒子模型可以用下图表示(截图来自火狐浏览器)： 其实盒子模型有两种，一种是w3c标准的盒子模型
盒子模型(Box Model)
小浩
01-21 1453
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名：内容（content），填充（padding），边框（border），边界（margin）,CSS 盒子模式都具备这些属性。 细节说明： ☛html 元素都可以看成一个盒子 ☛盒子模型的参照物不一样，则使用的 css 属性不一样。比如：从 div1 的角度看，是 margin-right，从 div2
（全新整理）上市公司数字经济与实体经济融合发展程度测算数据（2008-2022年）
09-06
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141966339 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理
目标检测相关，yolo系列.zip
09-06
1 目标检测的定义 目标检测（Object Detection）的任务是找出图像中所有感兴趣的目标（物体），确定它们的类别和位置，是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具有挑战性的问题。 目标检测任务可分为两个关键的子任务，目标定位和目标分类。首先检测图像中目标的位置（目标定位），然后给出每个目标的具体类别（目标分类）。输出结果是一个边界框（称为Bounding-box，一般形式为(x1,y1,x2,y2)，表示框的左上角坐标和右下角坐标），一个置信度分数（Confidence Score），表示边界框中是否包含检测对象的概率和各个类别的概率（首先得到类别概率，经过Softmax可得到类别标签）。 1.1 Two stage方法 目前主流的基于深度学习的目标检测算法主要分为两类：Two stage和One stage。Two stage方法将目标检测过程分为两个阶段。第一个阶段是 Region Proposal 生成阶段，主要用于生成潜在的目标候选框（Bounding-box proposals）。这个阶段通常使用卷积神经网络（CNN）从输入图像中提取特征，然后通过一些技巧（如选择性搜索）来生成候选框。第二个阶段是分类和位置精修阶段，将第一个阶段生成的候选框输入到另一个 CNN 中进行分类，并根据分类结果对候选框的位置进行微调。Two stage 方法的优点是准确度较高，缺点是速度相对较慢。 常见Tow stage目标检测算法有：R-CNN系列、SPPNet等。 1.2 One stage方法 One stage方法直接利用模型提取特征值，并利用这些特征值进行目标的分类和定位，不需要生成Region Proposal。这种方法的优点是速度快，因为省略了Region Proposal生成的过程。One stage方法的缺点是准确度相对较低，因为它没有对潜在的目标进行预先筛选。 常见的One stage目标检测算法有：YOLO系列、SSD系列和RetinaNet等。 2 常见名词解释 2.1 NMS(Non-Maximum Suppression) 目标检测模型一般会给出目标的多个预测边界框，对成百上千的预测边界框都进行调整肯定是不可行的,需要对这些结果先进行一个大体的挑选。NMS称为非极大值抑制，作用是从众多预测边界框中挑选出最具代表性的结果，这样可以加快算法效率，其主要流程如下： 设定一个置信度分数阈值，将置信度分数小于阈值的直接过滤掉 将剩下框的置信度分数从大到小排序，选中值最大的框 遍历其余的框，如果和当前框的重叠面积(IOU)大于设定的阈值（一般为0.7），就将框删除（超过设定阈值，认为两个框的里面的物体属于同一个类别） 从未处理的框中继续选一个置信度分数最大的，重复上述过程，直至所有框处理完毕 2.2 IoU(Intersection over Union) 定义了两个边界框的重叠度，当预测边界框和真实边界框差异很小时，或重叠度很大时，表示模型产生的预测边界框很准确。边界框A、B的IOU计算公式为: 2.3 mAP(mean Average Precision) mAP即均值平均精度，是评估目标检测模型效果的最重要指标，这个值介于0到1之间，且越大越好。mAP是AP(Average Precision)的平均值，那么首先需要了解AP的概念。想要了解AP的概念，还要首先了解目标检测中Precision和Recall的概念。 首先我们设置置信度阈值（Confidence Threshold）和IoU阈值（一般设置为0.5，也会衡量0.75以及0.9的mAP值）： 当一个预测边界框被认为是True Positive（TP）时，需要同时满足下面三个条件： Confidence Score > Confidence Threshold 预测类别匹配真实值(Ground truth)的类别 预测边界框的IoU大于设定的IoU阈值 不满足条件2或条件3，则认为是False Positive（FP）。当对应同一个真值有多个预测结果时，只有最高置信度分数的预测结果被认为是True Positive，其余被认为是False Positive。 Precision和Recall的概念如下图所示： Precision表示TP与预测边界框数量的比值 Recall表示TP与真实边界框数量的比值 改变不同的置信度阈值，可以获得多组Precision和Recall，Recall放X轴，Precision放Y轴，可以画出一个Precision-Recall曲线，简称P-R
8051Proteus仿真c源码用数组的指针控制P0口8位LED流水点亮
最新发布
09-06
8051Proteus仿真c源码用数组的指针控制P0 口8 位LED流水点亮提取方式是百度网盘分享地址
IE6盒子模型解析：标准模式下的双倍边距测试
实际上，IE6在标准模式下采用了W3C盒子模型，与Firefox等现代浏览器的行为保持一致。 文章中，作者首先回顾了之前阅读的文章《IE6很邪恶，但我爱它的盒子模型》，在这篇文章中，作者可能对IE6的盒子模型特性有所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值