Home > Mac > Internet Explorer ブロック要素化したbr要素をテーブル内で使用するとセル幅が異常になる

ブロック要素化したbr要素をテーブル内で使用するとセル幅が異常になる

display: block; を指定したbr要素をテーブルセル内に置くと、セル幅が異常に長くなることがある。

例示

<table border="2">
    <tr>
        <td>あい<br style="display: block;" />う</td>
        <td>えお</td>
    </tr>
</table>

あい
う

えお

左側のセルに問題のbr要素があります。

WinIE6 WinIE6.0での表示

br要素のあるセル内にある文字が区切り（改行コードなど）のない1バイト文字だけの場合や、2バイト文字が1文字しかない場合にはこの現象は発生しないそうです。

br要素に対する扱いはCSS1とCSS2で異なっています。

CSS1でのbr要素に対するデフォルトスタイルシート（あくまでも参考情報です）

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR {
    display: block
}

MacIE5.1?5.2でこの不具合が発生するそうです。