javascript - 为什么文本输入有额外的填充？

Question

我正在尝试在 <input type="text"> 上叠加文本(用于跨浏览器 placeholder 支持)。我发现我的定位总是偏离几个像素，因为某种填充无法通过设置 padding: 0; 删除。 .建议here和 here不解决问题。

您可以在 Chrome 的以下屏幕截图中看到此填充，作为蓝色突出显示和黄色边框之间的空白区域:

我怎样才能 a) 删除这个空间；或者 b) 使用 Javascript 测量它？

Answer 1

如果您用自己的边框替换默认边框，填充就会消失(至少对我而言，在 Chrome/Mac 上):

这是我使用的 CSS:

input {
    padding: 0;
    outline: none;
    border: 1px solid red;
}

http://jsfiddle.net/NZZ5B/