浏览器Quirksmode(怪异模式)与标准模式

  由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 

    W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。 
    
    那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式： 

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。 
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考： http://hsivonen.iki.fi/doctype/  
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析 
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。 
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。 
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。 


    Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。 
    什么是盒模式？ 这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。 

在Standars mode中： 

元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right; 

在Quirks mode中： 

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

1. 内联元素 ，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 
2.  内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。 
3. 浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。 
4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。 
5. 边界值可为负，其显示效果各浏览器可能不相同。 
6. 填充值不可为负。 
7. 边框默认的样式（border-style）为不显示（none）。 

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

BackCompat    对应quirks mode 
CSS1Compat    对应strict mode 

各浏览器的兼容性表，可以查看PPK的网站： 

http://www.quirksmode.org/compatibility.html  

参考文章： http://www.iteye.com/topic/241260  


http://hi.baidu.com/sonan/blog/item/68c5394e395708c6d0c86a40.html  

在看js代码时，有时会看到关于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下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注：Explorer 5仍然只支持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进行解析的。 


在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。 


5、mozilla提出了almost strict moede ，和strict mode的区别是： 

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode; 


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


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


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


IE6 IE7 在怪异模式下 盒模型是一模一样的   即width=width 
IE6 IE7 在标准模式下 盒模型也是一模一样的 即width=width+padding+border 

看实验：http://bbs.blueidea.com/thread-2839403-1-1.html 


在strict mode中 ： 

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


在quirks mode中 ： 

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


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


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

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

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

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

·填充值不可为负 。 

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


7、在quirks mode 和 strict mode中还有一个区别 ，但没经过验证，我只是发现有这个现象。 

在strict mode 中， 

table的css属性font-size会继承父级元素的 ，也就是说，table中的字体大小会继承父级元素字体的大小。 

在quirks mode 中， 

table的css属性font-size不会继承父级元素的 ，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。 


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

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

Js代码 
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;   

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; 



10、废话 ：我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的，那应该都是strict mode才对呀？是不是因为还有很多人不习惯给页面加上doctype声明呢？ 

原文转自：http://kino.iteye.com/blog/241260 


如何进入Standards模式? 
一般来讲浏览器是通过DTD来判断模式的；浏览器进入Standards模式的DTD有：HTML的strict.dtd和loose.dtd这两个DTD的简单区别是 

strict去掉了许多表现的标签，有利于结构和表现的分离 
loose会导致Firefox进入Almost Standards模式，在图片的处理上会有微小的差别 
在IE6下，如果在DTD之前有任何字符都将导致其进入quirks模式 


Quirks模式与Standards模式的区别 
quirks和standards的区别很多都可以归为IE5和IE6的区别。 

盒模型的高宽包含内补丁和边框 
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题 
可以设置行内元素的高宽 
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效 
可设置百分比的高度 
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的 
用margin:0 auto设置水平居中在IE下会失效 
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性: 
body{text-align:center};#{content:text-align:left} 
可以设置行内元素的高宽 
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效 
设置图片的padding会失效 
Table中的字体属性不能继承上层的设置 
white-space: pre会失效 
许多CSS默认样式将不同 
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效 
JavaScript中的区别 
http://www.quirksmode.org/js/contents.html#general 
css中的区别 
http://www.quirksmode.org/css/quirksmode.html 
参考 
Table of measurements 
MSDN 
dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode 

void function(){ 
var mode=document.compat 
if (mode="BackCompat") 
alert("当前以quirks mode的方式渲染页面"); 
else if(mode="CSS1Compat") 
alert("当前已strict mode的方式渲染页面"); 
else alert("浏览器版本不支持compatMode"); 
}() 
感谢：http://lefter.net/blog/quirks-standards