<input type="text" size="5">
のように size
属性を設定した場合、size
の値に従ってテキストボックスの幅がそれなりに決まりますが、
- この幅はどのように算出されているのでしょうか?
- ブラウザによって違いはあるのでしょうか?
HTML規格では「The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see」という大雑把な定義しかしていません。size
属性なしの状態でsize=20
とみなしますが、font-family
とfont-size
を揃えてもデフォルトの<input>
の幅がブラウザによってまちまちなことからわかる通り、size
を同じ値に指定してもブラウザ毎に異なる幅になるかと思われます。
Chromeのソースを見ると、Chromeでは原則「<フォント情報から取れる1文字平均幅> * <sizeの値 - 1> + <フォント情報から取れる1文字最大幅>」という計算で求めるようです。
サイズは、異なるブラウザ間で矛盾し、そのフォント設定が間違っています。
オプションを適切に整列させるには、<select multiple>
のサイズが必要です。 しかし、<input>
に使うべきではない。