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

画像のように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のところをお好きなセレクタに変えてください。