幅が指定されたリスト要素のマージンが正しく反映されない

症状

幅(widthプロパティ)が明示されたul, ol, dlの各要素に設定した上・左・右のマージンが無視される。下マージンは、リスト要素の終了タグの直後に親要素の終了タグがある場合に親要素の下マージンとして表示されてしまう。

例示

<div style="border:2px solid red;">
<ul style="width:200px; margin:20px; border:2px solid blue;">
<li>リスト</li>
</ul>
</div>

ul要素の四方に20pxのマージンが置かれるので、親のdiv要素のボーダー(赤)とul要素のボーダー(青)の間に20pxの隙間が開くはずです。

スクリーンショット

Moz1.0.1Moz1.0.1での表示(標準モード)

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

補足

WinIE6.0互換モードでは横方向マージンは反映されますが、上マージンは表示されません。また、下マージンは親要素の下マージンになります。

修正状況

WinIE6.0では標準・互換の両モードで不具合の発生が確認されました。

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

ABS関数 絶対値

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

上に戻る