HTMLの文字コードをUTF-8にしたら、フォームの要素（inputなど）が大きくなった！（横幅が通常の約2倍）

Tweet

Category css 2009/11/25

問題

HTMLの文字コードをUTF-8にしたら、フォームの要素（inputなど）が大きくなった！（横幅が通常の約2倍）

答え

IEのデフォルトのフォントまわりは何かおかしい。

フォーム要素だけでなく、本文の方のフォントもそう。

HTMLの文字コードをUTF-8にしたとき、フォントを指定しないと、IEのinput要素は通常の倍ぐらいの横幅になった。

日本語フォントか、monospace（等幅フォント）を指定すれば、横幅はいい具合になる。

input, textarea {font-family:'ＭＳ ゴシック';}

もしくは

input, textarea {font-family:monospace;}

など、好みで。

次のようにinputにsize=”2″など指定した場合、Firefox、IEでそれぞれ表示が以下のようになった。

<input type="text" size="4"> 年 <input type="text" size="2"> 月 <input type="text" size="2"> 日

IEとFirefoxの比較（フォント指定によるフォームの表示の違い）

IEのデフォルトの表示だと、入力欄が期待したより幅が広くて、sizeの文字数を入力しても余白ができています。