Chrome 和 Firefox 之间的 2px 不同答案

【问题标题】：2px of different between Chrome and FirefoxChrome 和 Firefox 之间的 2px 不同
【发布时间】：2014-01-14 17:53:13
【问题描述】：

Chrome 和 Firefox 的输入高度有 2px 的差异，为什么？（我不想为输入元素指定高度）

<html>
<head>
<title></title>
<style type="text/css">
p {
font-size: 11px;
font-family : Verdana;
}
input {
border: 1px solid #ccc;
font-size: 11px;
font-family : Verdana;
}
</style>
</head>
<body>    
<p>
<label>Text</label>
<input type="text" />
</p>
</body>
</html>

顺便说一句，如果我使用 Arial 字体而不是 Verdana，则大小是正确的。为什么？

谢谢。

【问题讨论】：

检查计算的（用户代理）样式，可能是填充、行高等
如果我重置所有元素： * {margin: 0; padding: 0} 结果是一样的。
我不会浪费时间来尝试找出浏览器之间 2 像素的布局差异。
你应该使用 CSS 重置。
不起作用 css 重置 @Diodeus。凯文：我需要同样的高度，这对我的设计很重要。

标签： css firefox google-chrome height

【解决方案1】：

我遇到了类似的问题，即 Firefox 无法呈现与 Chrome 相同的搜索框。我使用了以下 css 行并修复了它：

input::-moz-focus-inner {
    border: 0;
    padding: 0; 
    }

让我知道它是否有效。

【讨论】：

【解决方案2】：

调整line-height

input { line-height:17px; }

【讨论】：

不，抱歉。使用 line-height: 17px，Firefox 中的输入高度为 17px，Chrome 为 19px。

【解决方案3】：

将line-height 设置为 1em：

input {line-height: 1em;}

【讨论】：