盒模型

前面提到，盒模型（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{

	width: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

{

	width: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

{

	width:300px;

	height:300px;

	background-color:orange;

}

span.b

{

	height:200px;

	width: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;

	width:300px;

	height:90%;

	display:block;

}

div.c

{

	width: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

{

	width:300px;

	height:300px;

	background-color:blue;

}

div.b

{

	width: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/