Firefoxとchromeでセレクトボックスに日本語を入力すると高さがずれる

harada 562views 更新:2015年1月20日

セレクトボックスを2つ並べたもので、[→]などで[←]入力を行うUIがあります。
これを行っていて日本語を利用している場合、どちらかの要素が空になった場合に同じサイズを指定しても高さがずれてしまうことがあります。

この場合、高さを指定することで同じ高さになります。 特定のfont-familyを指定することでも同じ高さになることがありますが、ブラウザによって同じ高さになるフォントが違うためあまりおすすめはしません。

セレクトボックスに高さを指定する場合は下記のように入力します。

select[multiple="multiple"] {
  height: 8em;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません