虽然在兼容IE6时候经常会注意到两个模式的区别，但是系统的理解起来，还没有认真总结过。看了一些网上的资料。结合自己的理解汇总了一下，放在这里备忘并分享给大家。

浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。

浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（Standards Mode），但又没有放弃对原有模式的兼容（Quirks mode），这就是浏览器多种表现模式的来源。

当微软开始开发与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式： Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网页能正常显示。

对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE保留着，甚至在IE6—IE10都保留有多种模式供开发者使用。其实为了与可能数量众多的网页维持兼容，现代的网页浏览器一般都具有多种渲染模式：在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染，而在“quirks 模式”中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一种尝试于这两者之间妥协的“近乎标准”(almoststandards) 模式，实施了一种表单元格尺寸的怪异行为，除此之外符合W3C标准定义。

IE盒模型缺陷

（InternetExplorer box model bug）是指早期版本的IE调整网页元素大小的方法，和W3C为层叠样式表（CSS）语言推荐的标准方式不同。在IE6中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做“遵从标准模式”）。然而，出于向后兼容的原因，所有版本的IE (截至 IE 9 及 IE 10 Developer Preview) 仍然默认表现为通常的，非标准的模式。Internet Explorerfor Mac不受这种非标准行为影响。此外，Internet Explorer 10 于其 Consumer Preview 之中也改变其默认怪异模式为一种更加符合规范的类似于非 IE 浏览器的怪异模式。

模式之间的差异和示例

Quirks和Standards的区别大部分都可以归为IE5和IE6的区别。

在 Quirks 模式和标准模式之间一个突出的不同是对 CSS IE盒模型缺陷的处理。在第 6 版之前，InternetExplorer 曾经使用一种决定一个元素的盒模型的宽度和高度的，与 CSS 规范所指定相冲突的算法，而且由于 Internet Explorer 的流行，很多依赖于这种不正确的算法的网页被创建。而在版本 6, Internet Explorer 在标准模式下渲染时使用了CSS规范的算法，而在quirks模式下使用先前不规范的算法。

另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下，基于 Gecko 的浏览器将会对齐至基线，而在 quirks 模式下它们会对齐至底部。

此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管 CSS 规范要求字体样式被继承进表格。如果字号使用相对单位指定，一个标准兼容的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，一个声明了基准字号为 80% 的页面内声明表格为 80% （以保证在不正确继承字号的浏览器中有 80% 的字号）的字号将会，在一个标准兼容的浏览器里，显示具有 64% 字号的表格。结果是，浏览器在怪异模式典型的不对表格继承字号。.

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)

怪异模式CSS上区别《Quirks mode and strict mode》

javascript上的区别

以下是一些重要的不同点：

1）盒模型的高宽包含内边距padding和边框border

    在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽

    在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

    在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

   body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

接近标准模式

根据 CSS2 的规范维持了“传统的”表单元格的垂直方向大小调整的叫做“接近标准模式”(almoststandards mode) 或者“严格模式”(strictmode) 的第三种兼容性模