ど素人から毛を生やす。<延>

selectタグ、中身が半角と全角の場合で位置がズレる問題。

Web > css 2019年10月3日(最終更新:17日前)

どもです。
些細なことですが、ハマったので備忘。

selectタグ、中身が半角と全角の場合で、位置がズレるんですよね。
これがまことに気持ち悪いので直したかった。

さて、根本的にselectタグはinputに比べて狭いので、高さを調整してやることにしました。
ぶっちゃけGoogleChromeだけならそれで問題なかったです。
位置がずれるのは、描写に対してselectの高さが足りていないのが一因のようです。

問題はFireFox。

これはアカンですね。

苦戦していたところ、もうひとつの解決法がありました。
御馴染みのvertical-alignです。

select要素にvertical-align:middle。
これでselectズレに関しては解決です。しかし今度は文字の下位置がズレてしまいました。
これはこれでぴったり横並びにすると気持ち悪いですが、プルダウン変更時に要素がズレるよりはマシです。

さて、どうやらズレの原因は、

  1. 全角の下位置をアルファベットのベースラインに合わせていた
  2. その分、全角文字が上にずれるが、selectの高さはぴったり1字分

という2点のようです。
したがって、heightの高さを変えればベースライン分の浮上はselect内に収まるのでズレは発生せず(代わりにFFでは矢印がズレる)、全角と半角で文字の位置を同じにすれば要素のズレは発生しなくなるということです。

普通のフロント仕事なら、そもそもフォームタグはデザインに合わせてフルカスタマイズなのでどうとでもなるのですが、デフォルトがこういう仕様なのだという点は覚えておきたいところです。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)