入力フィールドをブラウザ間で同じに見えるようにするにはどうすればよいですか？

Question

2つの入力フィールドを持つログインページがあります。 Chrome、Firefox、IE10の場合は見栄えが良いですが、IE 7,8,9の場合は薄すぎます。フィールドのHTMLとクラスは次のとおりです。

HTML：

<div class="login-input"> 
<input data-val="true" data-val-required="Username is required." id="Username" name="Username" type="text" value=""> 
</div> 

CSS：

.login-input input 
{ 
width: 250px; 
height: 14px; 
} 

これは、それがクロム、Firefoxの、IE10（正しい見た目） http://i.imgur.com/6swf7.png

これは、それはIEでどのように見えるかある中でどのように見えるかです7,8,9（間違った外観） http://i.imgur.com/ltzdG.png

ありがとう！

Answer 1

パディングの値を設定してみましたか？

Answer 2

あなたはbox-sizingからborder-boxまでお試しいただけますが、ie7の場合はno supportです。

input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 3

高さに加えて線の高さを使用します。

.login-input input 
{ 
    width: 250px; 
    height: 14px; 
    line-height: 14px; 
}