親にボーダーを設置した要素を持つ要素のマージン設置が正しくない

症状

ボーダーが設置されている親要素を持つ要素にwidthプロパティまたはheightプロパティを具体的な値で指定したとき、その要素に指定したマージンが正しく設置されない。

  • WinIE6.0標準モード:上マージンと左マージンを(おそらく右マージンも)設置しない。下マージンは親要素の下マージンであるかのように設置される。
  • WinIE6.0互換モード、WinIE5.5:上のマージンを設置しない。下マージンは親要素の下マージンであるかのように設置される。

例示

<div style="margin-left: 3em; border:2px solid blue;">
<div style="margin-left:-3em; width:50%;">Top</div>
</div>
<div>Bottom</div>
Top
Bottom

div要素が入れ子になっている部分では親要素に3emの左マージン、子要素に-3emの左マージンを設置しているので、文字列「Top」と「Bottom」の縦方向の位置はほぼ揃っているはずです。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

修正状況

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

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

AVG関数 平均を求める

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

上に戻る