Chrome在Quirks and Standards模式下垂直对齐

Question

以下图片是使用相同浏览器（Chrome 25）对同一页面的渲染。唯一的区别是一个页面有DOCTYPE（因此处于标准模式）而一个页面没有（因此在Quirks中）

怪癖：

标准：

两个单元格都有vertical-align: middle，两个图片都是display: inline-block Vertical-align在Quirks中工作但在标准中没有，为什么？

---

HTML

<table class="oppres" id="oppscore4">
    <tbody>
        <tr id="oppscore4-main">
            <td><img src="images/gold.png"></td>
            <td></td>
            <td>0</td>
        </tr>
        <tr></tr>
        <tr id="oppscore4-total">
            <td></td>
            <td>=</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

CSS

table.oppres{
    height: 120px;
}

table[id^=oppscore]{
    width: 80px;
    font-size: 17px;
    line-height: 1;
}
table[id^=oppscore] tr{height: 1em;}
table[id^=oppscore] img{height: 0.9em;}
table[id^=oppscore] tr:nth-last-child(2){height: auto;}
table[id^=oppscore] td:first-child{text-align: right;}

足以重现问题的代码。

Answer 1

问题与vertical-align上的<td>无关，而是<img />

Quirks模式会触发解释here的行为：

  

图像的垂直对齐在某些条件下是封闭框的底部，而不是文本的基线。当图像是元素中的唯一内容（通常是表格单元格）时，会发生这种情况。这意味着，例如默认情况下，表单元格中的图像位于Quirks模式下的单元格底部（通常是作者想要的），而在标准模式下，图像下方有一些像素间距（除非设置为例如vertical-align： img元素的底部。）

您在图片下方的标准模式下看到的空间实际上是<td>的框基线与底部之间的空格（参见http://www.w3.org/TR/CSS2/visudet.html#leading）。

当vertical-align bottom <img /> <td>时，其框“底部与{{1}}的框底部对齐，因此不再有空格。