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

症状

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

例示

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

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

スクリーンショット

WinIE6WinIE6.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 }
  • CSS2でのbr要素に対するデフォルトスタイルシート(あくまでも参考情報です)
    BR:before       { content: "\A" }

修正状況

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

関連記事

スポンサーリンク

天草いるかワールド

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る