47927

[code]

    <input type="text" size="5">
    
[/code]

のように `size` 属性を設定した場合、`size` の値に従ってテキストボックスの幅がそれなりに決まりますが、

  1. この幅はどのように算出されているのでしょうか？
  2. ブラウザによって違いはあるのでしょうか？


CC BY-SA 4.0
2018-08-03T14:16:46.777
47226
2018-08-30T01:10:09.853
3925
question
html html5
テキストボックスに size 属性を指定した時の幅の算出方法は？


サイズは、異なるブラウザ間で矛盾し、そのフォント設定が間違っています。  
オプションを適切に整列させるには、`<select multiple>`のサイズが必要です。 しかし、`<input>`に使うべきではない。


CC BY-SA 4.0
2018-08-29T16:20:32.063
47921
2018-08-29T22:13:17.897
2018-08-29T22:13:17.897
19110
29912
47226
answer


HTML規格では「[The size attribute gives the number of characters that, in a visual
rendering, the user agent is to allow the user to
see](https://html.spec.whatwg.org/multipage/input.html#attr-input-
size)」という大雑把な定義しかしていません。`size` 属性なしの状態で`size=20`とみなしますが、`font-family`と`font-
size`を揃えてもデフォルトの`<input>`の幅がブラウザによってまちまちなことからわかる通り、`size`を同じ値に指定してもブラウザ毎に異なる幅になるかと思われます。

Chromeのソースを見ると、Chromeでは原則「<フォント情報から取れる1文字平均幅> * <sizeの値 - 1> +
<フォント情報から取れる1文字最大幅>」という計算で求めるようです。


CC BY-SA 4.0
2018-08-30T01:10:09.853
47927
2018-08-30T01:10:09.853
3475
47226
answer