IE、Firefox、Opera对盒模型解释的比较和浏览器兼容性 -

yong7181000

浏览: 29710 次
性别:
来自: 西安

最近访客更多访客>>

qgk

ljwkevin

lhq55

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

IE、Firefox、Opera对盒模型解释的比较和浏览器兼容性

博客分类：

网页技术

各浏览器盒模型

盒模型是WEB页面排版定位的核心，正是由于不同的浏览器对盒模型的解释不一，造成同样的CSS设计代码在不同的浏览器上有不同的表现。那么差异到底有多大，网上也没有一个直观的具体的数据可供参考，因此才有了这个盒模型比较数据。

既然要比较，必然要有一个标准，所以，在比较开始之前，先来了解一下W3C标准盒模型解释。

W3C标准盒模型

W3C标准盒模型

一个标准的盒模型由margin，boder，padding，content属性组成，每个属性在盒模型的显示中占据不同的区域：

Margin 占据margin边界线到boder边界线之间的区域（粉色区域）；

Boder 占据boder边界线到padding边界线之间的区域（黄色区域）；

Padding占据 padding边界线到content边界线之间的区域（绿色区域）；

而height和width决定Content的宽和高，在设置了这几个属性之后，整个盒模型的显示尺寸应该是：

宽度：（margin-left）+（boder-left）+（padding-left）+width+（padding-right）+（boder-right）+margin-right

高度：（margin-top）+（boder-top）+（padding-top）+height+（padding-bottom）+（boder-bottom）+margin-right

举例说明：

我们设置了一个margin， boder，padding各为1，heigh为50，width为100的div对象，那么这个div对象的宽度和高度分别为：

宽度：1+1+1+100+1+1+1=106；

高度：1+1+1+50+1+1+1=56；

但是由于margin 透明的缘故，因此，我们在一般情况下，实际看到是一个宽104，高54的div对象。

OK，有了参照标准，下面我们以一个实际的Div例子，来看看，在不同的浏览器下，盒模型的表现方式差异。

Div示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

.simple{

border: 1px solid #FF0000;

padding: 1px;

width:100px;

height:50px;

margin:1px;

float:left;

}

.simple .inner {

border:1px solid #00FF00;

padding: 1px;

width:100px;

height:50px;

margin:1px;

}

body {

background-color: #FFFFFF;

margin:0px;

}

-->

</style>

</head>

<body>

</div>

</body>

</html>

在代码里，我们定义了3个高度和宽度都分别是50像素和100像素的div对象，它们的 margin，boder，padding都为1，其中divB是divA对象的嵌套div。

我们要注意标红的代码段，此为标准XHTML文档的类型定义标签DOCTYPE，用来定义文档的类型，共分为3种，我们选择的Transitional类型为过渡类型，此类型的XHTML页面，浏览器的解释较为宽松，同样这个类型也是Dreamweaver默认的类型标签。在后面测试我们可以发现，此标签的设置与否，也会影响到浏览器对盒模型的解释。

测试环境：

浏览器：IE5.5、IE6、IE7、IE8、Firefox3.5、Opera9.64 （以下Firefox和Opera如未指定版本，皆为此版本，不再单独列出版本号）

显示器分辨率：1440X900

测试步骤：

1、不设定div对象的margin属性，不设定body的margin属性，测试各浏览器对div大小的解释和div距离body边距的大小；

2、设定div对象的margin属性为1，测试各浏览器div距离body的边距大小；

3、设定div对象的float属性为left，再次测试各浏览器div距离body的边距大小；

4、测试各个浏览器对div对象的大小解释和 divB相对divA的边距大小和嵌套表现；

5、最后，设置body的margin属性为0，再次测试各浏览器对div大小的解释和div距离body边距的大小；

6、将默认的DOCTYPE文档类型标签去掉，再次进行上述测试。

注：因为Firefox和Opera浏览器在窗口最大化和非最大化时渲染不一样，因此分开进行测试；

测试数据：

使用DOCTYPE标签各个浏览器解释数据（点击图片查看原图）

通过上图表格，可以看出各浏览器在解释使用DOCTYPE标签的网页时，有如下差异：

a) IE5.5对div的大小解释与标准的盒模型大小有出入，它对div对象的高度和宽度的定义没有考虑boder和padding设置的影响。

b) IE6在显示嵌套div对象时，对div的大小解释与标准的盒模型大小有出入；

c) IE系列除IE8之外，div与body上边距和左边距都是15px和10px，而IE8都是8px；

d) Firefox、Opera在非最大化窗口时，div与body上边距和左边距的距离也都是8px；但是最大化后，Firefox左边距会减少2px，变为6px；而Opera的左边距会减少1px，变为7px；

e) 当设置了div对象的margin属性为1px时，IE5.5的上边距没有发生变化，仍为15px，但是左边距增加1px，变为11px；IE6和IE7的上边距和左边距都比原来增加1px，分别变为16px和11px；IE8和非最大化窗口的Firefox、Opera上边距不变，仍为8px，左边距增加1px，变为9px；但是Firefox、Opera最大化后，Firefox的左边距会减少2px，变为7px，而Opera的左边距也会减少1px，变为8px；

f) 当设置了div对象的float属性为left之后，IE5.5和IE6的上边距和左边距分别变为16px和12px；IE7上边距和左边距分别为16px和11px；IE8和非最大化窗口的Firefox、Opera上边距和左边距都分别变为9px；Firefox、Opera最大化后，Firefox的左边距会减少2px，变为7px；Opera的左边距会减少1px，变为8px；

g) IE系列浏览器对包含嵌套的div对象的解释开始出现偏差， IE7、IE8、Firefox（包括最大化和非最大化）、Opera（包括最大化和非最大化）浏览器对divA和divB的大小显示符合盒模型标准，宽和高分别为54px和104px，divB对象的宽高溢出；IE5.5将内嵌的divB的大小高度和宽度分别解释为100px和50px，而外包divA的大小自动撑大，高度和宽度变为106px和55px；IE6对内嵌的divB对象的大小高度和宽度解释遵守盒模型计算规则，分别为104px和54px，但是外包divA的大小则自动撑大，高度和宽度变为110px和59px；所以，我们看到，IE5.5和IE6在显示时divB对象是完全包含在divA对象中的，没有宽高溢出的情况。

h) IE5.5对外包divA的大小计算公式：

宽：divABoder+divAPadding+divBMargin+divB宽度（divBWidth）+divBMargin+divAPadding+divABoder

所以，计算结果1+1+1+(100)+1+1+1=106px

高：divABoder+divAPadding+divB高度（divBHeight）+divBMargin+divAPadding+divABoder

所以，计算结果1+1++(50)+1+1+1=55px

i) IE6对外包divA的大小计算公式：

宽：divABoder+divAPadding+divBMargin+divB宽度（divBBoder+divBPadding+divBWidth+divBPadding+divBBoder）+divBMargin+divAPadding+divABoder

所以，计算结果1+1+1+(1+1+100+1+1)+1+1+1=110px；

高：divABoder+divAPadding+divB高度（divBBoder+divBPadding+divBHeight+divBPadding+divBBoder）+divBMargin+divAPadding+divABoder

所以，计算结果1+1+(1+1+50+1+1)+1+1+1=59px;

j) IE5、IE6在解释嵌套的div对象时，如果包含的div对象大小超过外层div的大小，会自动调整外层div的大小，不符合盒模型计算规则（自适应也有错？）；在计算div高度时，不论有没有设置magrin-top，都不计算Magrin-top的值，但是如果设置了magrin-bottom，则会在高度中包含magrin-bottom的值（有点匪夷所思）；

k) 设置body的margin属性为0px之后，IE系列浏览器、Firefox和Opera非最大化窗口下，div与body上边距和左边距的大小都为1px；但是Firefox在最大化窗口下，左边距会变为-1px；而Opera浏览器左边距则会变为0px；

总结：

IE8浏览器在使用DOCTYPE的Transitional类型时，对盒模型的解释已经接近标准，基本和基于W3c标准的Firefox浏览器在非最大化窗口条件下的解释一模一样；

未使用DOCTYPE标签各个浏览器解释数据（点击图片查看原图）

通过上图表格，可以看出各浏览器在不使用DOCTYPE标签的网页时，有如下差异：

a) 对于IE系列的浏览器，DOCTYPE标签的设置对页面盒模型的解释十分重要，如果没有指定该标签，各版本的浏览器在盒模型的解释上保持着惊人的一致（果然是一个模子倒出来的-_-!），都是非标准的盒模型解释，而是使用自家的自适应标准；

b) 对于IE5.5和IE6，如果设置了div对象是向左浮动和body的margin属性为0px，那么div对象与body的左边距为2px；

c) Firefox浏览器会对DOCTYPE标签低敏感，几乎对显示没有任何影响；

d) Opera浏览器对DOCTYPE标签敏感，如果未设置该标签，包含嵌套divB的divA对象的高度将会自适应；变为60px；

e) Opera浏览器对外包divA的高度计算公式：

高度：divABoder+divAPadding+divBMargin+divB高度(divBBoder+divBPadding+divBHeight+divBPadding+divBBoder)+divBMargin+divAPadding+divABorder

所以，计算结果1+1+1+(1+1+50+1+1)+1+1+1=60px；

经过以上的测试，相信对各个浏览器对盒模型的解释应该有一个基于数据上的直观了解。通过这些数据可以发现，要做出在所有浏览器都显示得一模一样的网页是件多么不容易的事情。

在本次测试中，最始料未及的是Firefox和Opera在最大化窗口下和非最大化窗口下，div边距的大小居然不一致，Firefox在左边距上居然还出现了-1px的大小,鉴于此，在后期增加了最大化和非最大化窗口来分别测试。不过，IE5.5在整个测试中算是最特立独行的一个，与标准盒模型的解释基本上大相径庭，值得欣慰的是使用的人越来越少，值得花力气和时间去兼容的必要性也在逐步下降；IE6、IE7在遵循W3C盒模型解释标准的同时，对模型的解读也有自己的“另类”方式，但使用这些浏览器的还大有人在，因此还是有必要花力气和时间去兼容；不过通过对IE8的测试，可以预见，未来发布的各个浏览器之间的差距将会越来越小，也越来越趋于标准化，这也许是广大WEB设计者的福音了，以后，不再需要奔走于各个浏览器之间去测试设计网页的兼容性了。

转载：http://www.cnblogs.com/nidilzhang/archive/2009/10/16/1584298.html

分享到：