Question

我在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，大小是正确的。为什么呢？

谢谢。

Example

Answer 1

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

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

让我知道它是否有效。

Answer 2

调整line-height

input { line-height:17px; }

Answer 3

将line-height设为1em：

input {line-height: 1em;}

Chrome和Firefox之间的差异为2px

3 个答案: