marginプロパティで値を一括指定すると無視される

症状

marginプロパティで値を一括指定すると、対象となる要素によっては指定が無視されることがある。

例示

<div style="width:4em; margin-left:4em; border:2px solid red;">
<div style="margin:0 -2em; border:2px solid blue;">A</div>
</div>
A

子要素(青いボーダー)は親要素(赤いボーダー)から左右に2文字分ずつはみ出させています。

※この例で示したバグはMacIE5.1で修正済みです。

スクリーンショット

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

補足

margin-leftプロパティなどで個別に指定すると、このバグを回避できます。

<div style="width:4em; margin-left:4em; border:2px solid red;">
<div style="margin-left:-2em; margin-right:-2em; border:2px solid blue;">A</div>
</div>
A

marginプロパティによる指定の影響を受ける要素は以下の通りです。

  • blockquote, ul, olの各要素は margin: auto; のような指定でセンタリングできない。(MacIE5.1でバグ修正)
  • table要素は margin: 数値 auto; のような指定でセンタリングできない。
  • map, caption, fieldsetの各要素ではすべて無視されたり、一部だけが無視されたりする。
  • overflowプロパティにvisible以外の値を指定した要素で、 margin: auto; 指定が無視される。
    <div style="overflow:auto; margin:auto; width……">content……</div>
    親にdiv要素を追加し、そちらにマージンを指定することで回避できます。
    <div style="margin:auto; width……">
    <div style="overflow:auto;……">content……</div>
    </div>

詳しくはCSS2対応状況ガイド:marginを参照してください。

修正状況

MacIE4.1/5.0で不具合の発生が確認されています。

関連記事

スポンサーリンク

XOOPS Cube

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

上に戻る