IEで背景画像とコンテンツが1pxずれるのを回避する方法

コンテンツボックスに影などの背景を付けたい場合、bodyにbackground-imageをcenterに指定して表示させると思います。しかし、この方法ではブラウザの大きさを変えたりすると、背景が1pxずれて表示されちゃうことがあります。それを回避するための方法。

文章じゃわかりにくいけど、IEなどブラウザの大きさを変更するとこんな状態になったりします。

これを回避するには、コンテンツボックスを背景用のdivで囲む方法がありますが、ただ背景を表示させる為だけに無駄なdivで囲むのはどうだろなーということで以下の方法を使用します。

まず、解決策としてbodyに [padding-left:1px] を指定して、1pxずれたところを修正。しかし、これでは正常に見れていたFirefoxなどでズレる恐れがあるので、CSSハックでIEのみに [padding-left:1px] を指定してあげます。

以下CSSの参考記述例です。

[html]body {
background-image: url(img/background.gif);
background-repeat: repeat-y;
background-position: center;
margin: 0px;
}

/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}

/* IE6以下でpadding指定 */
*html body {
padding-left: 1px;
}[/html]

これでズレは回避できます。Safariでは確認していないので、ずれるようなら適宜指定する必要があります。

この1pxのズレでご飯も喉を通らないくらい悩んでいた人は是非お試し下さい。

参考サイト

• CSSハック一覧 – HTML|CSSタグ辞書