怪异模式（Quirks Mode）对 HTML 页面的影响（3）

look_w

标准模式下的页面与怪异模式下的页面区别这一章我们主要选择一些典型的例子来说明 Quirks Mode 和 Standards Mode 对页面渲染的影响。
盒模型前面提到，盒模型（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，红色。
清单 1div.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