怪异模式

搬运地址：http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/

简单来说，就是一种兼容

Quirks Mode 概述
定义
什么是 Quirks Mode? 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。
历史
由渲染引擎产生的两种文档模式
谈到 Quirks modes 首先就要从浏览器渲染引擎说起。我们知道所有的浏览器都有自己的页面渲染引擎，渲染引擎主要包含两部分，一部分负责 HTML、CSS 代码的解析，另一部分负责脚本代码解析，这两部分合起来就可以绘制出完整的页面。
表 1 各浏览器渲染引擎构成
IE Trident – Chakra
Firefox Gecko – SpiderMonkey
Chrome Webkit Webcore V8
Safari Webkit Webcore Javascriptcore
Opera Presto – Carakan
从表 1 可以看出，现在市面上的主流浏览器中除了 Chrome 和 Safari 都采用了 Webkit 渲染引擎，其余三种浏览器采用了各自不同的渲染方式（不同的 HTML 解析，不同的 JS 解析）。我们这里暂且先不讨论不同的渲染引擎绘制页面时的差异，单以每一种渲染引擎而言，随着版本的发展其渲染页面的方式也有很大的不同。
IE 是最早提出 Quirks Mode 与 Standards Mode（与 Quirks 相对应的一种模式）的，后来 Firefox、Chrome、Safari、Opera 等浏览器也都支持了这两种渲染方式。但是只有在 IE 中用户才可以自由地在两种方式之间切换，其他浏览器都是自动匹配其中一种。

实例

1、盒模式兼容
出于历史原因，早期的 IE 浏览器（IE 6 以前）将盒子的 padding 和 border 算到了盒子的尺寸中，这一模型被称为 IE 盒模型。
分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 4 和 5 所示。明显可以看到，在 Standards Mode 下的 DIV 要大于 Quirks Mode，其实际渲染大小为 600px*600px。

div.a{
    width:500px;
    height:500px;
    border:50px;
    border-style:solid;
    border-color:red;
}

2、图片垂直居中
CSS 中 vertical-align 属性用于设置或检索对象内容垂直对齐方式，该属性定义行内元素的 base line 相对于该元素所在行的 base line 的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。其取值可以为 baseline，sub，supper，top，text-top，bottom，text-bottom，middle 等。

对于 inline 元素和 table-cell 元素，在 IE Standards Mode 下 vertical-align 属性默认取值为 baseline。而当 inline 元素的内容只有图片时，如 table 的单元格 table-cell。在 IE Quirks Mode 下，table 单元格中的图片的 vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
3、table元素中的字体
CSS 中，描述 font 的属性有 font-family，font-size，font-style，font-weight，分别表示了 font 的族系、大小、风格以及粗细。
描述
在 CSS 标准中，上述属性都是可以继承的。而在 IE Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
示例展示
如下代码段所示，我们定义 body 的 font 属性为斜体、红色、加粗、fantasy 字体，对于 table 元素，未定义其 font 属性。

body
{
    font-style:italic;
    color:red;
    font-size:200%;
   font-weight:bold;
    font-family: fantasy;
}

分别 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 9 和 10 所示。在 Quirks Mode 下，table 单元格中字体的 font-size，font-style，font-weight 属性不会继承 body，只有 family 属性会被继承。而在 Standards Mode 下，所有属性都被继承。
4、内联元素的尺寸

div.a
{
    width:300px;
    height:300px;
    background-color:orange;
}

span.b
{
    height:200px;
    width:200px;
    background-color:blue;
}

不能正常显示span
5、不能正常应用百分比，而是变成wrap-content方式
6、纵向高度溢出部分，会自动隐藏