读书人

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

发布时间: 2012-11-04 10:42:42 作者: rapoo

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

?

请看下面一段代码:

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

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

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

?

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

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

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

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


读书人网 >Web前端

热点推荐