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盒子模型。

?

请看下面一段代码：

标准模型在两个浏览器中显示相同
?
IE盒子模型在不同浏览器中显示有差异，容易出现bug

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

 

 

查看更多 下一篇