safariでセレクトボックスのレイアウトが微妙にずれる

最近はCSSをいじって、サイトのレイアウトを整えることも行っているのですが
IE,FireFoxでは全ての部品が画面の左部分に寄って表示されるところが
safariだとセレクトボックスだけが微妙に左揃えにならない。。。

セレクトボックスだけが数ピクセルほど右側になっているので
画面上の部品が左揃えではなく、インデントがガタガタになって表示されるので
かなり気になる。

と、Safariを開発モードにして調べてみると
どうやら、Safariで表示されるセレクトボックスではデフォルトでmargin:2pxに
なっており、ここが原因っぽい。

Selectタグにmargin-left:0px; を自前で設定すると、事象が解決しました。

今までサイトのレイアウト調整をしたことがなかったので
ブラウザで独自にCSSが当てられるとは知らなかった。。
いい勉強になりました♪


コメント

人気の投稿