WEB作成メモBLOG

cssで背景画像が1pxずれるクロームのバグ

HTML・CSS | 2012.03.08

横幅100%のカラム内にセンター揃えで背景を指定したところ、クロームブラウザのみで右に1pxずれるという現象に遭遇しました。

1pxのずれなので、あやうく見落としそうなわずかなずれです。
しかし、デザインによっては1pxのずれでも気になるもの・・・
そこで、色々と解決策を試してみたのですが、なかなかよい策がなく、下記の方法で対処しました。

右に1px足した背景画像を別に用意し、クロームのみのハックを使う

気分的にあまりすっきりとしない方法ですが、とりあえずこれで回避できました。

クローム用のハックはこちら
@media screen and (-webkit-min-device-pixel-ratio:0) {
#bg{background:url(img/bg.jpg) top center no-repeat;}
}

【PR】使わなくなったパソコンはありませんか?パソコン無料回収

関連する記事

カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらえるショッピングカートです。これまでに23万を超えるユーザー様からお申込みをいただいております。
カラーミーショップなら誰かに(大手に)頼らなくても、あなた好みのネットショップを作れます。あなたがセレクトした商品や作った商品の魅力を伝え、それを欲しいと思ってくれる人にお届けしてみませんか。
30日間、無料でお試しいただけるので、初心者の方やネットショップ作成サービスで悩んでいる方も、安心してご利用いただけます。
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額100円(税抜)~ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら
▼インストール不要の画像作成ツール▼
画像作成ツールボタンメーカープロ

カテゴリー

アーカイブ


リンク

アフラット
ページのトップへ戻る