IE7のバグ？position:relativeした画像が表示されない

HTML・CSS | 2010.09.21

IEの6以下の表示に悩まされることは多いのですが、IE７だけに発生する珍しいバグに遭遇しました。

現象は、position:relativeをつかって複数の画像を重ねて表示させようとしたところ、１箇所だけどうして表示されない画像が発生していまうというものでした。

position:relativeの設定を削除すると画像は表示されましたが、これでは表示させたい位置ではないため不十分です。
position:relativeを設定すると画像自体が表示されず、全く意味不明です。

コーディングがうまくいかない時はネットで検索すると何かしらの手がかりが見つかるものですが、
今回はそれすらほとんど得られず・・・。

仕方なく、レイアウトから別の組方に変更してposition:relativeを最小限に使う記述にしたところ、なんとか思い通りの表示に出来ました。

今回調べて分かった事は、「position:relativeとIEの相性が悪い」という事。
複雑なデザインになってくると、1px単位で表示位置を指定したい事もありますが、なるべくpositionではなく、floatやpadding、marginを使うほうがよいようです。

http://d.hatena.ne.jp/cyokodog……1238474706