Internet Explorer (Windows) CSSバグリスト

親要素のボックスからはみ出すボックスがフロートの下に置かれる(5.x/6.0)

症状

フロート化した要素に後続する要素のボックスが親要素のボックスからはみ出すような状況では、フロートに後続する要素のボックスはフロートボックスより下に置かれてしまう。

例示

<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="margin-left:110px; width:100px; border:2px solid green;">後続</div>
</div>

フロート（青色のボーダー）に後続する要素（緑色のボーダー）は、フロートの右側に置かれるはずです。

スクリーンショット

補足

上記の例示は親要素の幅を明示した場合に不具合が発生することを示しています。このほかに、フロートに後続する要素のボックスが閲覧領域からはみ出すとき（横スクロールが必要になる場合）にも同様の現象が発生します。

フロートに後続する要素の内容物がimg要素などの置換要素である場合、ボックスの位置は正しいが内容物はフロートボックスより下から始まる状態になり、内容領域の上端に空白の領域が発生します。

<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="clear:none; margin-left:110px; border:2px solid green;">
<img src="../img/img01.png" alt="" style="width:100px; height:48px;">
</div>
</div>

float

修正状況

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