技術ブログblog

CSSで指定した背景画像が1pxずれる?

97737e005c2335bd45df1c73124869c8_s

今回は技術的なお話です。
_r2_c2

画像のようにcssのbackgroundで背景を指定して内包した要素をセンタリングした場合、モダンブラウザの中でchromeだけ1px合わないことがありました。

背景が左ににずれてる感じなのか、もしくは内包した要素が右にずれてるのか…? もしくはchromeだけが正しいのかその他が正しいのか。 分かりませんがとにかく合わなくて参りました。 合わせたようでも全画面にするとずれたり…。

これがなんと今回IEは大丈夫。

仕方が無いのでcssハックを使うことにしました。

調べてみると最近のsafariやchromeのwebkit系は

@media screen and (-webkit-min-device-pixel-ratio:0)

こんな感じでどちらにも適用されてしまう指定の仕方しか出てこなく、とにかくsafariとchromeどちら片方でもいいので指定できる方法を探しました。 1時間くらい探したかも。根性。

最終的にsafariのみに指定できる方法が見つかりました…!

なのでsafariと同じ挙動だったfirefoxにも左に1pxのpaddingをいれて対応しました。

使った方法は以下になります。

safari

::made-up-pseudo-element, #mainMenu{
    padding-left:1px;
}

firefox

@-moz-document url-prefix() {
    #mainMenu{padding-left:1px;}
}

#mainMenuのところをお好きなセレクタに変えてください。

お問い合わせはこちら

web・システムに関するお悩みご相談、お見積もり、わからないことがございましたらいつでも受付いたします。 専門用語は極力避け、できるだけわかりやすくお伝えいたします。 お気軽にお問い合わせください。

お問い合わせ