フロートとフロートに後続するテーブルとが重なる

症状

  • フロートの後方に、テーブル要素を子孫に持ち、自身のclearプロパティがnone値であるブロックレベル要素がある。
  • ブロックレベル要素にwidthプロパティが指定されており、その値は内部のテーブルを収めきれないような値である。

このとき、テーブル自身やその内容物がフロートを避けず、フロートに重なってしまう。

例示

<div style="float:left; width:5em; border:2px solid blue;">
フロート</div>
<div style="width:10em; background:aqua;">
<table border="2">
<tr><td>11223344556677</td></tr>
</table>
</div>
フロート
11223344556677

フロートに後続するdiv要素の内容物が(内容領域からはみ出さずに)フロートの右に回りこむことができる空間の幅は約4emですが、テーブルの幅はそれを超えています。

スクリーンショット

N7.1N7.1での表示(標準モード)

Op7.2Opera7.2での表示(標準モード)

補足

Opera7.03の標準・互換モードとOpera7.1以降の互換モードではWinIE6.0互換モードに相当する表示をします(WinIEバグ054参照)。フロートに重なる不具合は発生しませんが、これはCSS2勧告に準じていない実装です。

なお、Opera6.06はNetscape7と同様の結果になります。

修正状況

  • Opera7.1以降の標準モードで不具合の発生を確認しました。
  • Opera7.1以降の互換モードおよびOpera7.03以前でこの不具合は発生しないようです。

スポンサーリンク

関連記事

スポンサーリンク

unalias コマンドの別名を抹消する

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

上に戻る