overflowへの対応が不完全な要素

症状

表のセル要素(th, td)や行グループ要素(thead, tfoot, tbody)など一部の要素では、overflowプロパティへの対応が不完全になっている。例えば、scroll値を指定してもスクロールバーが現れない。

例示

<table border="2" style="width:15em; table-layout:fixed;">
<tr>
<td style="overflow:visible; border:1px solid red;">AAAAAAAAAAAAAAAAAAAA</td>
<td style="overflow:hidden;"><br>BBBBBBBBBBBBBBBBBBBB</td>
</tr>
<tr>
<td style="overflow:scroll;">CCCCCCCCCCCCCCCCCCCC</td>
<td style="overflow:auto;"><br>DDDDDDDDDDDDDDDDDDDD</td>
</tr>
</table>
AAAAAAAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDD

表のレイアウトに固定レイアウトを使用すると、セル要素の内容物がボックスをはみ出すことがあります。ここでは、そのような場合にoverflowプロパティの値によって振る舞いがどのように変わるかを示しています。

スクリーンショット

WinIE6WinIE6.0での表示(標準モード)

補足

セル要素にoverflowプロパティを指定したとき、はみ出した内容物の扱いは概ね以下のようになります。強調されているものはCSS勧告と異なる実装です。

overflow: visible hidden scroll auto
WinIE6.0 ボックスを広げる。table要素のボックスをはみ出す部分は表示しない。 正常。 hiddenと同じ。スクロール不能。 hiddenと同じ。スクロール不能。
Netscape7.1 正常。 正常。 visibleと同じ。スクロール不能。 visibleと同じ。スクロール不能。
Opera7.11 hiddenと同じ。 正常。 hiddenと同じ。スクロール不能。 hiddenと同じ。スクロール不能。

※auto値の扱いについては、一般的なブロックボックスでの扱いと異なるかどうかで判断しています。

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生を確認しました。

関連記事

スポンサーリンク

ASCII関数 文字からASCIIコードに変換する

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

上に戻る