浏览器对网页的两种(三种)解析模式quirks mode、strict mode (Almost Standards Mode)

Quirks mode:怪异模式

Strict mode:标准模式

Almost Standards mode:近乎标准模式:由mozilla提出,和strict mode的区别是：img元素在strict中是inline的，而在almost strict mode中是block的.

   最近在给网近定CSS样式的时候,测试的时候老是有错位现象,我知道肯定是对宽度的解析不正确所造成的,也就是各大浏览器对盒模型的解析的不同,及解析网页时所使用的解析模式的不同所带来的问题.以前在看JS代码的时候也看到过,各大JS框架对解析模式的判断,然后作出相应的处理.(eg:document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;再如:document.body.scrollTop恒为0的问题等)都是因为这个解析模式用及网页中是否加入标准声明所带来的.

 

     在看相关CSS书的时候,很多书的作者都告诉你说IE5.5对CSS盒模型的理解与更高级版本的浏览器及一些标准浏览器的理解有差别,但是现在谁还在用IE5呀...所以脑海里就知道了原来整个盒子的宽度=margin+border+padding;总以为在什么情况下都是这样计算的,但是这是错误的,其实这个是由我们自己在做网页的时候,可以由自己指定的,当我们在我们的网页中加入不同的DTD文档类型声明时,就会有不同的效果.我一直被这个概念所误导,今天终于醒过来了^-^(我不知道大家有没有,还是我当初就理解错了大师们的意思_||'')

在网上找资料看到这篇文章很不错,收下...

  

 

2、历史原因。  

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

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

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

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

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

•     浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

•     对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

       ps:一般DW自动生成这个文档类型声明,主流浏览器都是标准模式来解析的.

要注意就是当使用这两个文档声明时各大浏览器使用的都是怪异模式:

•     对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：

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

 

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

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

在ie6中，如果在doctype声明前有一个xml声明(比如: ie不能识别标签)，则采用quirks mode解析。这条规则在ie7中已经移除了。

 

5、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

 

而区别就是产生在width属性上：

在strict mode中 ：

width是内容宽度 ，也就是说,元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

 

在quirks mode中 ：(在ie5下只有quirks mode所以它就是这样解析的,IE6也修正了这个错误)

width则是元素的实际宽度 ，内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)

 

ps:这一点很重要,我就是在这一点栽了几次了^*_*^.当网页老是错位时可以检查一下,当前网页的解析模式是什么:

这里把盒模式相关的东西记录一下，备忘 ！

·内联元素 ，例如、等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 注2.  内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

·边界值可为负，其显示效果各浏览器可能不相同 。

·填充值不可为负 。

·边框默认的样式（border-style）为不显示（none） 。

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

7、我们在编写跨浏览器兼容性的js代码时，常用到的判断代码(来源于ext) ：

 

var ua = navigator.userAgent.toLowerCase(); var client = { isStrict: document.compatMode == 'CSS1Compat', isOpera: ua.indexOf('opera') > -1, isIE: ua.indexOf('msie') > -1, isIE7: ua.indexOf('msie 7') > -1, isSafari: /webkit|khtml/.test(ua), isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1, isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1, isLinux: ua.indexOf('linux') != -1 }; client.isBorderBox = client.isIE && !client.isStrict; client.isSafari3 = client.isSafari && !!(document.evaluate); client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari; /** * You're not sill using IE6 are you? */ var ltIE7 = client.isIE && !client.isIE7;

后语:在我用IE工具栏切换到不同的解析模式在同不同的浏览器核心版本时,解析也会发生不一样的效果....