15 August 2009

IE7でネストしたブロック要素のmarginが消えるバグ

IE7でマージンが消えるバグです。

現象

  • ブロック要素barはブロック要素fooの子要素である。
  • barはfooの最初の子要素である(間に空白や改行以外になにもない)。
  • fooのpaddingは0でない。
  • barにはheightやwidthが指定されている。
  • barにはmarginが指定されている。

この条件で、barのmarginが効かなくなります。以下コード例。

<div style="padding: 10px;" id="foo">
     <span style="display: block; width: 100px; margin: 50px;" id="bar">barspan>
     <div style="width: 100px; margin: 50px;" id="bar">bazspan>
div>

解決方法

親要素の直後にコメントを入れる。

子要素が一番目の要素でなければいいので、コメントでもいいのでなにか要素を挟んであげます。

<div style="padding: 10px;" id="foo">

     <span style="display: block; width: 100px; margin: 50px;" id="bar">barspan>
     <div style="width: 100px; margin: 50px;" id="bar">bazspan>
div>
親要素と子要素の間の改行をなくす

なんでかわかりませんが、こうしてもなおりました。

<div style="padding: 10px;" id="foo"><span style="display: block; width: 100px; margin: 50px;" id="bar">barspan>
     <div style="width: 100px; margin: 50px;" id="bar">bazspan>
div>

感想

html, cssのバグは、発生する条件を特定するのがとても面倒ですね。そこさえ当たりがついてしまえば、解決方法はすぐに探すことができるのですが。

こういうことに時間が取られるとモチベーションが著しくそがれますね。

参考

IE7でmarginが消える « Beyond Perspective Solutions 公式ブログ