3
<input type="text" size="5">

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

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

2 件の回答 2

4

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-familyfont-sizeを揃えてもデフォルトの<input>の幅がブラウザによってまちまちなことからわかる通り、sizeを同じ値に指定してもブラウザ毎に異なる幅になるかと思われます。

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

-1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。