html - 如何使我的输入字段在浏览器中看起来相同？

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

谢谢！

score 1 · Accepted Answer

1

您是否尝试设置填充值？

于 2013-01-10T15:36:22.513 回答

score 1 · Accepted Answer

您可以尝试box-sizing，border-box但不支持ie7。

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

score 0 · Accepted Answer

除了高度之外，还使用 line-height。

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

3 回答 3