IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件
まずは以下のサンプルを。「IE Default (simulate)」が、IE での見え方を CSS で再現したもの。
- デモ : IE で input type="text" と input type="password" に同じ size 属性を指定すると幅が異なる件
- コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes
原因は IE のデフォルトスタイルシートで
input[type="text"]
には MS UI Gothicinput[type="password"]
には Tahoma
という異なるフォントがそれぞれに指定されているため。
これを回避するには、input[type="text"]
と input[type="password"]
の両方に同じ font-family
を設定する。
個人的には、パスワードの「●」文字が小さめに見えるのが好みなので、Tahoma に統一設定するのがオススメ。
もちろん、size
属性を使わず、font-family
に依存しない単位 (px など) で幅を指定していればそもそも問題なし。