0

次の画像は、同じブラウザ (Chrome 25) を使用した同じページのレンダリングです。唯一の違いは、1 つのページに DOCTYPE があり (つまり Standards モード)、もう 1 つのページにない (つまり Quirks) ことです。

癖:

標準:

両方のセルに がありvertical-align: middle、両方の画像に がありdisplay: inline-blockます。
Vertical-align は Quirks では機能しますが、Standards では機能しません。なぜですか?

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 モードは、ここで説明されている動作をトリガーします。

画像の垂直方向の配置は、特定の条件下では、テキストのベースラインではなく、囲みボックスの下部になります。これは、画像が要素 (通常は表のセル) 内の唯一のコンテンツである場合に発生します。これは、たとえば表のセルの画像は、標準モードでは画像の下に数ピクセルの間隔があるのに対し、標準モードでは画像の下にいくつかのピクセルの間隔があるのに対し、Quirks モードではデフォルトでセルの下部にあることを意味します。 vertical-align: img 要素の場合は下)。

標準モードで画像の下に表示されるスペースは、実際には<td>ボックスのベースラインと下部の間のスペースです ( http://www.w3.org/TR/CSS2/visudet.html#leadingを参照)。

がボックスの底にあるときvertical-alignはbottom、<img />のボックスの底と整列する<td>ので、もうスペースはありません。

于 2013-02-27T10:56:50.863 に答える