怪异模式（Quirks Mode）对 HTML 页面的影响（5）内联元素的尺寸

look_w

内联元素的尺寸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，背景色为蓝色。
清单 4div.a{        width:300px;        height:300px;        background-colorrange;}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 元素，背景为蓝色。
清单 5table.a{        height:500px;        background-color:pink;}div.b{        background-colorrange;        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