Corredor

ウェブ、プログラミングの勉強メモ。

IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件

まずは以下の CodePen でサンプルを。「IE Default (simulate)」が、IE での見え方を CSS で再現したもの。

See the Pen IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件 by Neos21 (@Neos21) on CodePen.

原因は IE のデフォルトスタイルシートで

  • input[type="text"] には MS UI Gothic
  • input[type="password"] には Tahoma

という異なるフォントがそれぞれに指定されているため。

これを回避するには、input[type="text"]input[type="password"] の両方に同じ font-family を設定する

個人的には、パスワードの「●」文字が小さめに見えるのが好みなので、Tahoma に統一設定するのがオススメ。

もちろん、size 属性を使わず、font-family に依存しない単位 (px など) で幅を指定していればそもそも問題なし。