どもです。
些細なことですが、ハマったので備忘。
selectタグ、中身が半角と全角の場合で、位置がズレるんですよね。
これがまことに気持ち悪いので直したかった。
さて、根本的にselectタグはinputに比べて狭いので、高さを調整してやることにしました。
ぶっちゃけGoogleChromeだけならそれで問題なかったです。
位置がずれるのは、描写に対してselectの高さが足りていないのが一因のようです。
問題はFireFox。
これはアカンですね。
苦戦していたところ、もうひとつの解決法がありました。
御馴染みのvertical-alignです。
select要素にvertical-align:middle。
これでselectズレに関しては解決です。しかし今度は文字の下位置がズレてしまいました。
これはこれでぴったり横並びにすると気持ち悪いですが、プルダウン変更時に要素がズレるよりはマシです。
さて、どうやらズレの原因は、
- 全角の下位置をアルファベットのベースラインに合わせていた
- その分、全角文字が上にずれるが、selectの高さはぴったり1字分
という２点のようです。
したがって、heightの高さを変えればベースライン分の浮上はselect内に収まるのでズレは発生せず(代わりにFFでは矢印がズレる)、全角と半角で文字の位置を同じにすれば要素のズレは発生しなくなるということです。
普通のフロント仕事なら、そもそもフォームタグはデザインに合わせてフルカスタマイズなのでどうとでもなるのですが、デフォルトがこういう仕様なのだという点は覚えておきたいところです。