怪异模式（Quirks Mode）对 HTML 页面的影响（4）图片元素的垂直对齐方式

look_w

图片元素的垂直对齐方式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 图片，为了突出显示区别，分别定义单元格与图片的边框颜色为蓝色和橘色。
清单 2td.a{        border-style:solid;        border-color:blue;}img.c{        width:200px;        height:200px;        border-style:solid;        border-colorrange;}分别在 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 属性。
清单 3body{        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