« カレンダースクリプト:カレンダーのみの表示切替 | トップページ | 終わらなかった……orz »

2006/09/09

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で表示しても、【記事本文】の背景色や枠線がきちんと表示されます。
バナー
サイドバー

【マイリスト】

コンテンツ

【記事本文】

« カレンダースクリプト:カレンダーのみの表示切替 | トップページ | 終わらなかった……orz »

パソコン・インターネット」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: IE6でブロック要素の背景色や枠線が消える現象と対策:

« カレンダースクリプト:カレンダーのみの表示切替 | トップページ | 終わらなかった……orz »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ