ie和firefox 盒子模型区别以及quirks mode(怪异模式)和strict mode(严格格式)

以前一直没有注意过这个问题,这次是因为公司的项目把html的声明

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
给注视掉了,才出现了这个问题,如果有这个声明浏览器都是按照w3c的标准来解析元素布局模式的。公司因为有特殊的需求,自定义了很多东西,不想浏览器严格按照标准解析,就把这个给注视掉了。正因为这样,让我摸不着头脑怎么回事,不同浏览器里明明stlye都一样,div元素大小却不一样。现在知道怎么回事了。

IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,

看下面2个示例图:

盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度。

IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,

看下面2个示例图:

盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度

我们可以将用CSS Hack 来区分2个标准:(具体参见css Hack 说明,利用不同浏览器识别css特殊符号能力不同来定义css)
另外,如果在定义HTML使用了<!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”> 那么就不会有这个问题,所有的Box模型都将使用W3C标准,不管是在IE中还是其他浏览器中。

 -----------------------------------------------------

浏览器的两种模式quirks mode(怪异模式)和strict mode(严格格式)

1、quirks mode和strict mode是浏览器解析css的两种模式,或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode,但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以,这些支持两种模式的浏览器当拿到一张网页时,所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。

4、浏览器如何判断何用哪种方式解析CSS?

解决方案就是采用doctype声明,大多数浏览器采用下面的这些判断规则

  •     浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
  •     对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
  •     对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:

对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析

在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。

可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。

quirks mode和strict mode最大的不同就是提现在对盒模式的解释上,上面已经提到了就不重复了。

5、在js中如何判断当前浏览器正在以何种方式解析? 
    document对象有个属性compatMode ,它有两个值:
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

就是没有注意这个,发现ie打开项目的网页都是默认用quirks模式,导致页面乱掉,加上声明后就好了。之前还在根据不同浏览器在js里,在css来做判断进行样式的调整,废了不少力,现在把这个加上就规范得多了,不用弄得那么复杂,以后产品开发人员自定义开发的时候也简单了。

posted @ 2013-05-16 19:30 寂静沙滩 阅读(...) 评论(...) 编辑 收藏