如何让我的输入字段在浏览器中看起来一样？

Question

我有一个包含两个输入字段的登录页面。在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;
}

这就是它在Chrome，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

除高度外还使用line-height。

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