IE6でブロック要素の背景色や枠線が消える現象と対策

このサイトでは、CSS の設定により、記事本文などに背景色をつけて枠線で囲っています。
ところが、IE6 で表示させたときになぜだか枠線の上部が欠けてしまったり、背景色が付かなかったり……という現象が発生し、悩まされていました。
Firefoxだと正常に表示されるし、IE6 でもスクロールして戻ってくるとちゃんと表示されたり……と謎の動作をするのです。

いろいろ試してみたところ、どうやら CSS の position 属性に原因があるように思えて来ました。
どうも、position: relative; に設定された要素の子要素以下で、明示的に幅(width)属性を指定しなかった場合、その要素内部の表示がおかしくなる模様です。

これまでの CSS 設定は以下のような感じになっていました。

主要な設定のみ抜粋。背景色は解りやすくするためのもの。

#banner {}

#pagebody { position: relative; width: 100%; } #left { position: absolute; left: 0px; top: 0px; width: 200px; } .module-body { border:3px double purple; background-color:#f8eeff; } #center { padding-left: 200px; } .entry-body { border:3px double purple; background-color:#f8eeff; }

これを実際に設定して表示させたイメージは次のようになります。

これをIE6で表示すると、【記事本文】の部分に背景色が付かなかったり、枠線が欠けたりします。
一方、サイドバーには width 属性が設定されているため、その内部要素(【マイリスト】)もきちんと表示されます。

バナー

サイドバー

【マイリスト】

コンテンツ

【記事本文】

これを、次のように変更してみました。

class="entry-body"にwidth属性を追加。

#banner {}

#pagebody { position: relative; width: 100%; } #left { width: 200px; position: absolute; left: 0px; top: 0px; } .module-body { border:3px double purple; background-color:#f8eeff; } #center { padding-left: 200px; } .entry-body { border:3px double purple; background-color:#f8eeff; width:100%; }

これを実際に設定して表示させたイメージは次のようになります。

IEで表示しても、【記事本文】の背景色や枠線がきちんと表示されます。

バナー

サイドバー

【マイリスト】

コンテンツ

【記事本文】