IE6と7で1ピクセル分、背景画像がずれます

質問

IE6、7で背景画像が横（右）に1ピクセルずれてしまいます。
ブラウザのお気に入りなどの欄を表示する（固定表示）とキッチリ表示されます。
ソースは以下の通りで、特別なことはしていませんが、これはIEのバグなのでしょうか？　他のブラウザはMacも含め問題ありません。
よろしくお願いします。

background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;

回答No.2

hamhamham · ベストアンサー

こんにちは。

IE6の有名なバグです。

background: #FFFFFF url(images/bg.jpg) no-repeat fixed center top;
を、仮にbodyに適用したとすると、

body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
padding-left: 1px;
}

と、強引に反対側に1ピクセルずらしてやればOKなのですが、
当然のごとくIE以外のブラウザでは逆に左に1ピクセルずれてしまいます。

そこで、スマートなやり方ではないのですが、ハックを利用します。
このバグは仰るとおりIE7でも生じるので、

body {
background: #FFFFFF url(images/hoge.jpg) center hoge hoge;
}

/* ↓IE6以下に適用 */
* html body {
padding-left: 1px;
}

/* ↓IE7に適用 */
*+html body {
padding-left: 1px;
}

ハックの使用は出来る限り避けたいのですが。。
たかが1ピクセル、されど1ピクセルですよね（笑

参考URL：

http://www.lucky-bag.com/archives/2006/06/css-hacks.html

お礼

かな～り遅くなりましたが・・・
お返事ありがとうございました。

回答No.1

shizuku

ブラウザにスクロールバーがつかない場合だとずれた記憶があったような。

仮に、
左から余白10px、赤ベタ300px、余白10pxの背景画像（合計320px）をセンタリングする場合は
赤ベタ部分を右に1px増やして301pxの幅に、一番右の余白を1px増やして11pxに。（合計321pxの画像）

私はこんな感じで対処したような・・・。
あやふやな記憶ですし、どのようなページ構成/背景画像を利用されるのか、わからないので、時間があったら参考にやってみてください。
ダメだったらごめんなさい。

参考URL：

http://norisfactory.com/stylesheetlab/000010.php

お礼

お返事ありがとうございます。
CSSハック（*:first-child+html）でmargin-left: 1px;を指定して、
とりあえず、正常表示されるようになりました。
※でも、お気に入り表示・非表示・幅拡大などをすると不安定なようです。

参考URLの方も参考にしてみます。
とりあえず、ありがとうございました。