[IE] <input type=”password” /> タグにて指定したテキストボックスが大きく表示される

【概要】
Windows XP 上の Internet Explorer において <input type=”password” /> タグにて指定したテキストボックスが大きく表示される

【現象】
Windows XP 上の Internet Explorer において <input type=”password” /> タグにて指定したテキストボックスは <input type=”text” /> タグにて指定したテキストボックスより大きく表示されます

【原因】
Windows XP 上の Internet Explorer においては、<input type=”text” /> タグ、 <input type=”password” /> タグにて指定するテキストボックス内のデフォルトのフォントが異なります。   この、デフォルトのフォントが異なることにより、テキストボックスの大きさに違いが生じます。 各タグにおけるデフォルトフォントは以下の通りとなります。

<input type=”text” /> “MS UI Gothic”
<input type=”password” /> “Tahoma”

【回避策】
パスワードボックスの大きさを一致させる必要がある場合は、同じ font-family を指定してください。 font-family はスタイルシートで指定するか、該当のタグ内で個別に指定することができます。

(例) ここでは、フォントを “Tahoma” にしています。

<input style=”font-family: Tahoma;” type=”text” />
<input style=”font-family: Tahoma;” type=”password” />

【詳細】
なお、本現象は Windows XP より前のバージョンにおいては発生いたしません。
これは、Windows XP より前のバージョンでは、<input type=”text” /> タグ、 <input type=”password” /> タグにおけるデフォルトフォントが “MS UI Gothic” のためです

下記のサイトより抜粋しています。
http://support.microsoft.com/kb/831331/ja

コメント

コメントを受け付けておりません。