webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


CSSで背景画像をcenterにした際に1pxずれる時の対処法

Category:Web

とあるサイト制作時に背景画像をCSSでセンターにしたら、なぜかIE6、IE7、chrome、safari(←全部Windows環境。)で右に1pxズレる現象が発生。
しかも、いつもならchromeとかじゃなく、IE8なのに。

実は以前にもこんなことがあって、仕方ないんでhtmlとCSSをちょっと変更して対処しましたが、今回はデザインの関係上うまくいかない…。
かといってdivを無駄に増やすのは自分のポリシーに反する(`・ω・´)
いや、まぁ、自己満足なんですけど…。

で、イロイロ調べた所<body>にpadding-left:1px;とかで解決するとかありましたが、ナニかが違うのか上手くいかない上に横スクロールまで出る始末(´・ω・`)
イロイロ試行錯誤した結果、とりあえずなんか出来たっぽいのでご紹介。

またまた、需要ないと思いますが…。
こんな方法もありますよ的な感じで(・∀・)つ

ここから続き

まずこの現象は、

  • <div>(←他のタグでもなるかも。)にピクセル指定して、maring:auto;でセンタリング
  • ブラウザのウィンドウサイズが奇数

だと発生する模様。
なので、IE6とかchromeでウィンドウサイズを絶妙なマウスコントロールで1px小さくすれば発生しません。

で、ふと思いついたのが「画像に直接1px足せばいんじゃね?」ってことで、右にズレてるので右に1px足してみました。
ただ、これだけだと元々だいじょぶだったFirefoxとかOperaでズレます。
なもんで、CSSハックを使用してIE6、IE7、chrome、safariにだけ1px足した画像を読み込むように指定。

CSSハックについては『Webクリエイターボックス』さんを参考にさせていただきました。

CSSで背景画像をcenterにした際に1pxずれる時の対処法のサンプル

正直、時間の関係上パパパっとやったついでにMac環境で確認してないので、ホントに全部で大丈夫なのか自信ない…。
ってか、家のノートPCもWin7なのにIE8のままだったから後でIE9にして確認してみないと。

※2012/8/31 追記
31日時点のChrome(Ver21)だと修正されているようです。むしろ逆に画像に1px足してるとずれるようになるっていう…。
ってか、いつの間にかバージョンが20オーバーしてるし。
このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 0

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/93-da4dbe03

トラックバック一覧