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

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

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

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

解説

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

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

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

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;
}

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

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

参考サイト

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments0

Remember personal info

Trackbacks (Close)4

pingback from センタリングした背景が1pxすれる | webdesignlab 09-03-19 12:50

[…] 参考サイトは以下 ・IEで背景画像とコンテンツが1pxずれるのを回避する方法 ・Opera、Safariで中寄せした背景が1ピクセル右にずれる問題 […]

pingback from エム・アールデザイン|デザインブログ » CSSでbodyに設定した背景画像がIEでずれる怪 10-06-24 19:51

[…] このソースはミblogのIEで背景画像とコンテンツが1pxずれるのを回避する方法からの転記である。 […]

pingback from CSSで背景画像を中央揃えしたらIEで1pxずれる件 | 2inc.org 10-08-29 17:34

[…] IEで背景画像とコンテンツが1pxずれるのを回避する方法(ミblog) […]

pingback from InternetExplorerの曲者っぷりを理解して対処する。 | ブクマ! 11-07-26 21:30

[…] IEで背景画像とコンテンツが1pxずれるのを回避する方法 – ミblog : レビューや日常など …

Return to page top

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