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

Question

我正在尝试覆盖文本<input type="text">(用于跨浏览器placeholder支持).我发现我的定位总是偏离几个像素,因为某种填充无法通过设置去除padding: 0;.这里和这里的建议并没有解决问题.

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

在此输入图像描述

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

Answer 1

如果你用自己的边框替换默认边框，填充就会消失（至少对我来说，在 Chrome/Mac 上）：

在此输入图像描述

这是我使用的CSS：

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