入れ子関係の要素間で下マージンの相殺が正しく行われない

症状

入れ子関係にある複数の要素間ではマージンの相殺が行われることがあるが、Opera7ではこれが正しく行われない。ボーダーやパディングを挟む入れ子関係にあるにも関わらず以下のような状態になる。

  1. 最後の子ブロック要素にデフォルトのスタイルシートで下マージンを指定している要素(h1, pなど)があるとき、最後の子要素の下マージンが設置されない(Opera7.1では同量の下マージンが親要素に設置されてしまう場合がある)。(7.0/7.1)
  2. 最後の子ブロック要素に外部スタイルシートファイルやstyle要素などで下マージンを指定した要素があるとき、子要素と親要素の両方にマージンが設置されてしまう。(7.1)

例示

<div style="border:2px solid blue;">
<p style="border:2px solid red;">例1</p>
<p style="border:2px solid red;">例1</p>
</div>
<div style="border:2px solid blue;">例1</div>
<hr>
<div style="border:2px solid blue;">
<p style="margin:1em 0; border:2px solid red;">例2</p>
</div>
<div style="border:2px solid blue;">例2</div>

例1

例1

例1

例2

例2

例1は親要素に下マージンが設置されてしまう現象、例2は子要素と親要素の両方に下マージンが設置されてしまう現象の例です。

スクリーンショット

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

Op7Opera7.11での表示(標準モード)

修正状況

  • Opera7.11標準モード、Opera7.11互換モードで不具合の発生を確認しました。
  • Opera6.06、Opera7.21でこの不具合は発生しないようです。

関連記事

スポンサーリンク

%演算子 余り

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

上に戻る