<input type="password">タグと<input type="text">タグは、サイトログインなどのID、パスワード入力で、ペアになって登場することが多々あります。そんなありふれたタグですが、Windows XP 上の Internet Explorer で見ると、<input type="password"> タグで指定したテキストボックスが、<input type="text">タグで指定したテキストボックスよりも大きく表示されるという現象に遭遇することがあります。

これは、Internet Explorer内のデフォルトの設定で、<input type="password">タグの指定フォントが"Tahoma"、<input type="text">タグの指定フォントが"MS UI Gothic"と違っているために起こる現象です。仕様であり、バグではない？ようですが、2つのテキストボックスが並んだとき、デザイン的に美しいとはいい難い状態になります。


この現象は、他のブラウザでは起きません。また、Internet Explorerでも、Windows2000以前ならば、指定フォントが同じなので、やはり起きません。

これを修正するには、 <input type="password"> タグと<input type="text">タグのフォントを統一してやる必要があります。
CSSを使って、以下のように、青文字部分を追加します。