CSS：输入标签外观不一致（Firefox和Safari）

Question

我正在试图找出为什么我的输入标签看起来在Firefox和＆amp;苹果浏览器 看一下这个截图：

我使用过Firebug＆amp; Safari开发人员工具可以了解正在发生的事情。 似乎Firefox为每个边框添加了另外1个像素，这导致另外4个像素 这使输入看起来更大，更烦人。此外，Firefox中的文字看起来有点高。是因为额外的像素？或其他什么？

无论如何，我想知道为什么在Firefox中添加这些像素的原因。

#signup-form form input[type="text"], input[type="password"] {
    height:20px;
    padding:2px 4px;
    width:300px;
    color:#a1a1a1;
    font-style:italic;
    display:block;
    margin:10px 0px 0px 0px
}

Answer 1

设置border-width: 2px;。浏览器和操作系统之间的元素呈现方式不同，这只是Web开发人员不得不忍受的。表单元素比其他元素更容易受到影响。