ヘッダー・コニファロゴ
[ IE関連 ] CSSで、input type="password"とinput type="text"のテキストエリアのサイズを同じにする

<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つのテキストボックスが並んだとき、デザイン的に美しいとはいい難い状態になります。

<input type="password" name="textfieldName1" size="24">
<input type="text" name="textfieldName2" size="24">
Windows XP 上の Internet Explorer で見ると、(下のオレンジ色の)左の方が大きいはずです。

左)input typeパスワード   右)input typeテキスト

この現象は、他のブラウザでは起きません。また、Internet Explorerでも、Windows2000以前ならば、指定フォントが同じなので、やはり起きません。
これを修正するには、 <input type="password"> タグと<input type="text">タグのフォントを統一してやる必要があります。
CSSを使って、以下のように、青文字部分を追加します。

<input style="font-family:tahoma;" type="password" name="textfieldName1" size="24">
<input style="font-family:tahoma;" type="text" name="textfieldName2" size="24">
今度は、Windows XP 上の Internet Explorer でも左右同じに見えるはずです。

左)input typeパスワード   右)input typeテキスト

※フォント名は、同じなら何でもかまいません。


●この現象に関するマイクロソフト社のサポートページ:http://support.microsoft.com/kb/831331/ja 




戻るボタン
Copyright© 2013 Conifer,Inc. All rights reserved.