Jak zrobić, aby moje pola wejściowe wyglądały tak samo w różnych przeglądarkach?

Question

Mam stronę logowania z dwoma polami wprowadzania danych. W Chrome, Firefox i IE10 wyglądają świetnie, ale w IE 7, 8, 9 są zbyt cienkie. Oto kod HTML i klasa dla pól.

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; 
} 

Jak to wygląda w Chrome, Firefox, IE10 (prawidłowy wygląd) http://i.imgur.com/6swf7.png

Jak to wygląda w IE 7, 8, 9 (nieprawidłowy wygląd) http://i.imgur.com/ltzdG.png

Dzięki!

Answer 1

Czy próbowałeś ustawić wartości wypełnienia?

Answer 2

Możesz spróbować box-sizing do border-box, ale jest no support dla ie7 do tego.

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

Answer 3

Użyj wysokości linii oprócz wysokości.

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