0

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

怪癖：

标准：

两个细胞都有vertical-align: middle，两个图像都是display: inline-block。
Vertical-align 在 Quirks 中有效，但在 Standard 中无效，为什么？

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;}

足以重现该问题的代码。

4

1 回答 1

0

问题不是关于vertical-align，<td>而是关于<img />

怪癖模式触发此处解释的行为：

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

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

When vertical-alignis bottomon <img />its box' bottom 与<td>'box bottom 对齐，因此不再有空间。

于 2013-02-27T10:56:50.863 回答