selectを横並びにした時に縦の位置がズレる

Google Chrome で発生する select のズレ

Google Chromeでだけ、selectの表示が若干ズレてたので、原因調べて直してみる。

ズレる原因

まず、各要素の配置をデベロッパーツールで見てみると、

select がズレる時、要素の情報

最初の1個だけ、やっぱりズレてる。

CSSで色々調整したけど、うまく直らない…。

どうしたもんかと悩んでいると、

select がズレる時、表示項目を揃えてみた

あれ?ズレてない。

どうやら原因はフォントの違いっぽい。

ズレてるセレクトボックスの表示情報が全部半角だったため、他と違うフォント構成となり、ズレてた模様。

修正方法

CSSのfont-familyの構成を見直した。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください