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

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

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

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

html

css

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

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

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

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

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

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


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.