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 公式ブログ