フロートを含むボックスのマージンが無視される

症状

  • (複数の子要素または多くの内容物を含む)フロート
  • 上記のフロートの直後にclearプロパティで回り込みを抑制したフロートでない要素

これら全ての要素を子に持つ要素で、左や上のマージンが無視されることがある。

※左フロートでは左マージンが、右フロートでは左マージンと上マージンが無視されます。

例示

<div style="margin:1em; background:aqua;">
<div style="float:right; width:50%;">float</div>
<div style="clear:right;">clear</div>

親のdiv要素のボックスの四方に幅1emのマージンが設置されるはずです。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

補足

以下のいずれかの方法を用いることで不具合を回避することができます。

  • 問題のフロートを含むボックスの上パディングに0より大きい値を指定する。
  • 問題のフロートを含むボックスのwidthプロパティにauto以外の値を指定する。

修正状況

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

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

base64変換の一覧とその詳細サンプルコード

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

上に戻る