调试一个页面，ie下面页面css样式很是奇怪，各种失效。找了半天原因不知道怎么回事。最后在调试工具中发现，文档模式为quirk，改成别的(IE 7|8|9)正常。
为什么会自动选择此文档模式呢？
先看看什么是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”（也叫“DOCTYPE 嗅探”）的功能。
引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。
Internet Explorer 6+ 支持两种呈现模式，分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML（或 HTML 4.0）DOCTYPE 的页时，它会以 Standards 模式呈现该页；否则，它会以 Quirks模式呈现该页（有关详细信息，请参阅 CSS Enhancements in Internet Explorer 6）。
Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式：Quirks 和 Standards（有关详细信息，请参阅 http://www.opera.com/docs/specs/doctype/）。
Mozilla Firefox 1+ 支持三种呈现模式：Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的 Almost Standards 模式对应于 Internet Explorer 和 Opera 的 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE（并且该页被分配为 text/html MIME 类型）时，Firefox 会以 Almost Standards 模式呈现该页。当页包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE（或者该页被分配为 XML MIME 类型）时，该页将以 Standards 模式呈现（有关详细信息，请参阅 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）。
可以通过临时向页中添加以下客户端脚本（该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效）确定浏览器的当前呈现模式。
<script type="text/javascript"> alert( document.compatMode ); </script>
您需要关心浏览器的呈现模式，因为它会影响将层叠样式表应用于该页的方式。如果将现有 HTML 页转换为 XHTML 页，那么在浏览器中打开它们时，它们可能看起来非常不同。
例如，Internet Explorer 以不同方式计算页元素的大小，这取决于呈现模式（它使用不同的 CSS Box Model）。在 Quirks 模式下，元素的宽度是通过将元素的内容、内边距、边框和边距相加而计算得到的。在 Standards 模式下，元素的宽度是只考虑元素内容的宽度而计算得到的。
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} - 设置图片的padding会失效
- Table中的字体属性不能继承上层的设置
- white-space: pre会失效
- 许多CSS默认样式将不同
- 在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
- 这些都不用怎么去管了，以前的版本谁在意呢。如何避免默认quirk模式呢，一是设置doctype，二是doctype前不允许有任何字符（空字符除外），因为一旦发现有字符在文档首浏览器将会输出其在body并将字符与<HTML>之间的标记<!***>用<!---->注释起来，那么文档内容将无doctype设置。
- 这里测试的仅为IE9，其他浏览器未知。
转自：http://www.cnblogs.com/zaric/archive/2011/11/25/2263139.html