IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせくださ

Question

IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせください。以下htmlの一部

中央に表示されます。

以下スタイルシートの一部 body { background:url("./background1.gif") no-repeat scroll left top; } #hoge { background:url("./background2.gif") no-repeat scroll left top; margin-left:auto; margin-right:auto; } と

にそれぞれ、絵柄は同じだけど色が違う背景画像を設定しています。目的は、ブラウザの横幅を広げた時に背景がずれないようにするためです。 FireFox3.6、IE7、IE8、GoogleChlomeでは目的の動きを取ることを確認できたのですが、IE6ではそうなりません。 IE6では、

に設定した背景画像の開始位置が、

の範囲（開始位置）になっているのです。のように、ブラウザの開始位置に配置したいときはどのようにしたらいいのでしょうか？ cssハックを使って、IE6だけpositionでずらすという方法も試したのですが、それだと背景にずれが生じてしまうため、あきらめました。他にも何か良い方法がありましたら、お聞かせいただけると助かります。宜しくお願い致します。

chile5583 · Accepted Answer

bodyにはmarginが最初から設定されているから、ブラウザによって勝手に余白が入ってずれることがあります。

cssに　margin:0 auto　を足してbackground-positionを同じにしてちょっと書き換えれば解決するはずです。
background-position: center top;　も入れたほうが良いかも。
ただし、bodyとdivは共にブラウザでセンタリング表示であると仮定した場合です。

（cssここから）
body {
background:url("./background1.gif");
background-position: center top;
margin:0 auto;
text-align:center;
}
#hoge {
background:url("./background2.gif");
background-position: center top;
margin:0 auto;
text-align:center;
width:300px; /* たとえば */
}
（cssここまで）

※margin:0 auto;　という表記は、

margin-left:auto;
margin-right:auto;
margin-top: 0;
margin-bottom:0;

を1行で書いたものです

naokita · Answer

NO.2 最後のところを訂正

whidth　→　width

naokita · Answer

サイドの背景を暗い画像に。昨日の続きですが・・・
----------------
IE6で崩れるって事は、DTDスイッチで過去モードの可能性あり・・・

更に、記述された、CSSだけで、センター配置すらならないし、
Firefox、IE、Chromeでもズレるはず。（CSS部分を省略したのだろうか？）

仮に、widthで幅を設定し、
センター配置にしてbody以下のpadding,marginを0にしたとしても、
backgroundでscroll left topなのだから、
ブラウザ幅を変更したら画像がズレるはず。
left topだから、背景はdivの開始位置から始まるのがルール。
だからdivが動けば画像も一緒にズレる。
-----------------------

他にも方法があるが、
一番簡単な方法は、背景画像とdiv画像をセンター配置に統一すれば画像が一緒に移動。

body { margin:0;padding:0;
background:url(./b1.gif) no-repeat center top;
}
#hoge {
background:url(./b2.gif) no-repeat center top;
margin: 0 auto;
whidth: 600px; /* 幅は適当に */
}

IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせくださ

bodyにはmarginが最初から設定されているから、ブラウザによって勝手に余白が入ってずれることがあります。

この回答への補足

NO.2 最後のところを訂正

サイドの背景を暗い画像に。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング