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

Question

我试图弄清楚为什么我的输入标签在 Firefox 和 Safari 中看起来相当不均匀。看看这个截图：

我使用 Firebug 和 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 开发人员必须忍受的。表单元素比其他元素更受此影响。