【HTML】IEで、inputタグの width を指定したにもかかわらず、幅がずれる

■ はじめに

 * IE10で、inputタグの width を指定したにもかかわらず、幅がずれる
 * よくよく観察すると、崩れているのは、inputタグの type="text" と type="password" で差異が出ている
 * ひょっとしたら、placeholder(HTML5)を指定してたらこれも影響しているかも

■ 再現性

 * IE09    : 不再現
 * IE10    : 再現
 * IE11    : 再現
 * Firefox : 不再現
 * Chrome  : 不再現

■ 原因

<input type="text"> タグ、 <input type="password"> タグで、デフォルトのフォントが異なる。
このデフォルトのフォントが異なることにより、テキストボックスの幅に違いが生じるため

■ 解決策

 * フォントの種類「font-family: XXXX;」を明示的に指定する

input {
   font-family:Tahoma;
}

注意

<input type="text" name="sample1" style="font-family: Tahoma; width: 200px;" placeholder="Text"></br>
<input type="password" name="sample2" style="font-family: Tahoma; width: 200px;"  placeholder="Password"></br>
では不十分だった。

# 恐らく、placeholderのフォントも関係ある?


関連記事

CSS に関するトラブルあれこれ

http://blogs.yahoo.co.jp/dk521123/35508165.html