盒模型
前面提到，盒模型（box mode）是浏览器 Quirks Mode 和 Standards Mode 的主要区别。
描述
对于“盒模型”一词并没有明确的文档定义，它是开发人员描述 CSS 中块级元素的一种约定俗称。
具体而言，针对一个块级元素，如<p>、<div>、<span>等，CSS 的规范定义了一个宽度和高度，以及 3 个级别的环绕它的框 padding、border 和 margin 。这些属性我们可以把它转移到我们日常生活中的盒子上来理解，所以将这种模型称为盒模式。对于盒模型，针对高度和宽度的定义，不同浏览器的解释不同。
出于历史原因，早期的 IE 浏览器（IE 6 以前）将盒子的 padding 和 border 算到了盒子的尺寸中，这一模型被称为 IE 盒模型。该模型如图 2.1 所示，
图 2 IE 盒模型
在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
而在 W3C 标准的盒模型中，box 的大小就是 content 的大小，如图 3 所示，
图 3 W3C 标准盒模型
box width = content width，
box height = content height，
这一区别将导致页面绘制时所有的块级元素都出现很大的差别，所以两种不同的文档模式下的页面也区别很大。
示例展示
如下代码段所示，我们定义一个简单的 DIV 元素，设定其宽度和高度分别为 500px，定义 border 为 50px，红色。
清单 1
div.a{
500px;
height:500px;
border:50px;
border-style:solid;
border-color:red;
}
分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 4 和 5 所示。明显可以看到，在 Standards Mode 下的 DIV 要大于 Quirks Mode，其实际渲染大小为 600px*600px。
图 4 IE 5 Quirks Mode
图 5 IE 8 Standards Mode
图片元素的垂直对齐方式
CSS 中 vertical-align 属性用于设置或检索对象内容垂直对齐方式，该属性定义行内元素的 base line 相对于该元素所在行的 base line 的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。其取值可以为 baseline，sub，supper，top，text-top，bottom，text-bottom，middle 等。什么是 baseline 和 bottom，它们有何区别？下面我们通过一副图来进行解释。
描述
CSS 为了确定文字行的位置，定义如下概念描述，base line，bottom line，top line， middle line。其中，base line 指的是一行字横排时下沿的基础线，baseline 并不是汉字的下端沿，而是英文字母 e 的下端沿，bottom line，指的是汉字，或者英文字母 p，g 的下端沿。如下图 6 所示。
图 6 base line 概念
对于 inline 元素和 table-cell 元素，在 IE Standards Mode 下 vertical-align 属性默认取值为 baseline。而当 inline 元素的内容只有图片时，如 table 的单元格 table-cell。在 IE Quirks Mode 下，table 单元格中的图片的 vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
示例展示
如下代码段所示，我们定义一行两列的 table，table 单元格设定为宽度和高度均为 200px 的 img 图片，为了突出显示区别，分别定义单元格与图片的边框颜色为蓝色和橘色。
清单 2
td.a
{
border-style:solid;
border-color:blue;
}
img.c
{
200px;
height:200px;
border-style:solid;
border-color:orange;
}
分别在 IE 10 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 7 和 8 所示。在 Quirks Mode 下，table 单元格中的图片与单元格底部对齐，而在 Standards Mode 下，图片与单元格之间多了 3 个像素的空间。
图 7 IE 10 Quirks Mode
图 8 IE 8 Standards Mode
<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 属性。
清单 3
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 下，所有属性都被继承。
图 9 IE 5 Quirks Mode
图 10 IE 8 Standards Mode
内联元素的尺寸
CSS 中常见的元素有两类，分别是 block（块级）元素及 inline（内联）元素。这两类元素的主要区别在于 block 元素通常作为独立的一块继续显示，前后都有换行，而 inline 元素则不会产生换行。根据 CSS 标准，对于 inline 元素，又可以分为 replaced 和 non-replaced 两类。
描述
什么是 non-replaced inline 元素？首先，我们解释下 non-replaced 元素，对于 HTML 中定义的元素，默认具有 CSS 格式化外表范围的元素，比如 img 元素，有自己的宽和高，我们称其为 replaced 元素，其他例 input，textarea，select，object，等都是 replaced 元素。除了这些元素之外的元素就是 non-replaced 元素。因此，具有 non-replaced 属性的 inline 元素即为 non-replaced inline 元素，如 span 元素。
在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
示例展示
如下代码段所示，为了突出显示，我们定义一个背景色为橘色的 div 中嵌套一个 span 元素，该 span 元素的高和宽均为 200px，背景色为蓝色。
清单 4
div.a
{
300px;
height:300px;
background-color:orange;
}
span.b
{
height:200px;
200px;
background-color:blue;
}
分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 11 和 12 所示。在 Quirks Mode 下，span 元素能够正常显示，左图中 200*200 的蓝色的区块。而在 Standards Mode 下，span 尺寸为零。
图 11 IE 5 Quirks Mode
图 12 IE 8 Standards Mode
元素的百分比高度
CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。
描述
当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
示例展示
如下代码所示，为了突出显示，我们定义一个背景为粉色的 table，在 table 的单元格中嵌入一个背景为橘色的 div b，将该 div 的高度设置为 90%。定义 b 的子节点 c 为高度和宽度均为 200px 的 div 元素，背景为蓝色。
清单 5
table.a
{
height:500px;
background-color:pink;
}
div.b
{
background-color:orange;
300px;
height:90%;
display:block;
}
div.c
{
200px;
height:200px;
background-color:blue;
}
分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 13 和 14 所示。在 Quirks Mode 下，div b 的高度为 talle 单元格的 90%，而在 Standards Mode 下，div b 的高度由其子节点 c 决定，为 200px。
图 13 IE 5 Quirks Mode
图 14 IE 8 Standards Mode
元素溢出的处理
CSS 中 overflow 属性定义了一个元素的内容不适合指定的尺寸时，溢出元素内容的处理方式。默认值为 visible，即显示溢出。
描述
在 IE Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。
示例展示
如下代码段所示，我们定义一个背景为蓝色的 div a，在 a 中嵌入一个背景为橘色的 div b，设置 b 的高度 400px 大于 a 的高度 300px，使 a 发生溢出。
清单 6
div.a
{
300px;
height:300px;
background-color:blue;
}
div.b
{
200px;
height:400px;
background-color:orange;
}
分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行，结果如图 15 和 16 所示。在 Quirks Mode 下，div a 的高度为又 300px 变为 400px，以适应 b 的大小，而在 Standards Mode 下，div a 的大小保持不变，溢出部分保留。
图 15 IE 5 Quirks Mode
图 16 IE 8 Standards Mode
X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。
目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：
<meta http-equiv="X-UA-Compatible" content="IE=7" />
这样我们才能使得页面在IE8里面表现正常！
浏览器市场份额的激烈竞争，给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本，IE6、IE7、IE8 等等。当然使用诸如 IETester，多版本 IE 共存解决方案之类的第三方集成工具，可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。
X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。
各种兼容模式代码示例如下：
<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。
<meta http-equiv="X-UA-Compatible" content="IE=7" />
无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。
<meta http-equiv="X-UA-Compatible" content="IE=8" />
开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。
<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说，它是首选的兼容性模式。
在现阶段，IE8 版本推向市场没有多久，份额不高。因此，考虑兼容旧版本的模式值得推荐。
参考：http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/