Internet Explorerのテキストフィールド(input type=”text”)のテキスト縦位置をイイ感じにしたい。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

テキストフィールド ( input ) に padding ではなく height を指定したい時があるんですけど
そうするとIEで文字が上揃えになっちゃってるみたいなんですよね。

IE 8 の表示(6~8同じ感じだった)
IEのinput内テキスト縦位置

Firefoxは最初っからイイ感じ。
firefoxのinput内テキスト縦位置

html
[html]
<input type="text" name="example" />
[/html]
css
[css]
input[type="text"]{
height:1.6em;
}
[/css]

細かい事で申し訳ないけど気持ち悪い、なんとかしたい。

IEでも縦位置中央にするには

試してみた結果、heightと同じ値をline-heightに指定する方法が有効ぽかった。

[css]
input[type="text"]{
height:1.6em;
line-height:1.6em;
}
[/css]

すると、IEの表示がこうなる。
IEのinput内テキスト縦位置:line-height追加

確認用テキストフィールド

heightのみ指定
line-heightを追加
paddingの場合

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.