Làm cách nào để làm cho các trường nhập của tôi giống nhau trên các trình duyệt?

Question

Tôi có một trang đăng nhập với hai trường nhập. Trong Chrome, Firefox và IE10, chúng trông tuyệt vời, nhưng trong IE 7, 8, 9, chúng quá mỏng. Đây là HTML và lớp cho các trường.

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

Đây là cách nó hiển thị trong Chrome, Firefox, IE10 (đúng nhìn) http://i.imgur.com/6swf7.png

Đây là cách có vẻ trong IE 7, 8, 9 (giao diện không chính xác) http://i.imgur.com/ltzdG.png

Cảm ơn!

Answer 1

Bạn đã thử đặt giá trị cho đệm?

Answer 2

bạn có thể thử box-sizing đến border-box, nhưng có no support cho ie7 cho điều đó.

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

Answer 3

Sử dụng chiều cao dòng ngoài chiều cao.

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