如何让不同浏览器中的输入框外观一致？

Question

我是一名能翻译文字的助手。

我有一个带有两个输入字段的登录页面，在Chrome、Firefox和IE10中，它们看起来很好，但在IE7、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 谢谢！

- Jonathan

---

我在我的网站上遇到了同样的问题。我通过为IE加载不同的样式表来解决它。请参见https://dev59.com/THA65IYBdhLWcg3w9DqF - Bart

尝试设置一个 padding 值。 - dezman

重置 CSS 文件有时用于创建一个“始终一致”的起点，使基础样式相同 - 例如，1em 的默认值在不同的浏览器中可能会有所不同。 - Mark Schultheiss

你的代码在我的IE8上和Firefox上看起来完全一样：http://jsfiddle.net/mnZgS/ - Andrea Ligios

Answer 1

你可以尝试使用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;
}

- Dziad Borowy

Answer 2

你是否尝试设置填充值？

- Vincent Cohen

---

我刚刚删除了高度属性，并在输入字段的顶部和底部添加了填充，现在看起来好多了。谢谢！ - Jonathan

Answer 3

除了使用height属性外，还可以使用line-height属性。

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

- A. Gilfrin