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オーバーしてるし。
関連記事
- »ちょっと気になったのでオンラインストレージ探してみた。
- »隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。
- »CSSで背景画像をcenterにした際に1pxずれる時の対処法
- »高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。
- »GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。
Sponsored Links
Comment : 0
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/93-da4dbe03
