W3C匣子模型和IE盒子模型及其检测

W3C盒子模型和IE盒子模型及其检测

CSS盒子模式都具备的属性包括：内容(content)、填充(padding)、边框(border)、边界(margin)。

盒子模型分为两类：W3C标准盒子模型和IE盒子模型 （微软确实不喜欢服从他家的标准）
这两者的关键差别就在于：

W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含填充（padding）和边框（border）
IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border）

我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型），这样可以避免多个浏览器对同一页面的不兼容。

因为如果不声明DOCTYPE类型，IE会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型；

而如果在页面中声明了DOCTYPE模型，所有的浏览器都会把盒子模型解释为W3C盒子模型。

请看下面一段代码：

<!DOCTYPE HTML>
<html>
  <head>
    <title>W3C.html</title>
    <style type="text/css">
    	#test{
    		width:100px;
    		height:100px;
    		border:solid 10px red;
    	}
    </style>
  </head>  
  <body>
  	<div id="test"></div>
  </body>
</html>

以上代码显示的是W3C的标准盒子模型，去掉第一行就是IE盒子模型。

看看这简单代码在浏览器中的展示：

W3C匣子模型和IE盒子模型及其检测

标准模型在两个浏览器中显示相同

W3C匣子模型和IE盒子模型及其检测

IE盒子模型在不同浏览器中显示有差异，容易出现bug

另外，检测页面的盒子模型类别可以使用jQuery中的$.boxModel属性（现已经不再推荐使用）或者$.support.boxModel属性。如果返回值为true表示W3C盒子模型，如果为false则为IE盒子模型。

W3C匣子模型和IE盒子模型及其检测

相关推荐