Mozilla 5.0系 CSSバグリスト

標準モードでは常にディセンダが確保される

• 2004-08-23修正。名称を「テーブル内に画像を敷き詰められない(N6.2)」から「標準モードでは常にディセンダが確保される」に変更し、症状を書き換え。

症状

標準モードでは、border, cellpadding, cellspacing の各属性値を0にしたテーブルで画像を敷き詰めようとしても、画像の下部に隙間が空いてしまう。

標準モードでは、文字列の有無に関わらず常に行のディセンダ部分が確保される。このため、border, cellpadding, cellspacing の各属性値を0にしたテーブルで画像を敷き詰めようとしても、画像の下部に隙間が空くなどの現象が発生する。

例示

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="../img/img01.png" alt="★" width="48" height="48"></td>
<td><img src="../img/img01.png" alt="★" width="48" height="48"></td>
</tr>
<tr>
<td><img src="../img/img01.png" alt="★" width="48" height="48"></td>
<td><img src="../img/img01.png" alt="★" width="48" height="48"></td>
</tr>
</table>

表を用い、4つの画像を敷き詰めようとしています。

スクリーンショット

補足

通常、画像のボックスの下端はベースラインに揃えられます。そのため、ベースラインの下にはみ出す部分を確保するために隙間が開きます。Mozillaなどの標準モードでは、画像のみで文字がないときでもこの隙間が確保されるため、画像を敷き詰められない現象が発生します（文字がないときでも確保するのが正しい考え方なのですが）。

以下の例をMozillaの互換モードやWinIEで表示すると上のセル（文字列なし）では画像の下端がセルの縁に接していますが、下のセル（文字列あり）では画像の下端とセルの縁の間に隙間ができます。一方、Mozillaの標準モードではどちらのセルも画像の下端とセルの縁の間に隙間ができます。これは、隙間の状態が一貫しているMozillaの標準モードが正しい表示です。

A

対処法は、画像に vertical-align: bottom; を指定することです。

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="../img/img01.png" alt="★" style="vertical-align:bottom;"></td>
<td><img src="../img/img01.png" alt="★" style="vertical-align:bottom;"></td>
</tr>
<tr>
<td><img src="../img/img01.png" alt="★" style="vertical-align:bottom;"></td>
<td><img src="../img/img01.png" alt="★" style="vertical-align:bottom;"></td>
</tr>
</table>

なお、互換モードおよび準標準モード（Moz1.1/Moz1.0.1/N7以降でHTML4 TransitionalのDOCTYPEを識別子つきで指定した文書に適用）では、vertical-alignを指定しなくても画像が敷き詰められます。

この問題については、http://www.mozilla.gr.jp/standards/webtips0018.html（もじら組）も参照してください。

修正状況

この現象はCSS仕様に準拠しているために発生するものです。