html - 如何删除 Webkit 和 Gecko 中文本输入的额外和不同的伪填充？

Question

问题只发生在 Webkit 中的 input[type="text"] 上。无论我做什么，元素上都有一个额外的 padding: 1px 0 0 1px(仅顶部和左侧)。

类似的问题发生在 Gecko 中，input[type="text"] 有一个等效的额外 padding: 1px 0 0 1px 和 input[type= "button"] 有一个额外的 padding: 1px 0 0 0。

这里有一个 JSFiddle 向您展示了我尝试过的一切，但没有任何效果:http://jsfiddle.net/PncMR/10/

有趣的是，当您将所有元素的行高设置为 0 ( http://jsfiddle.net/PncMR/11/ ) 时，唯一不受影响的元素是有问题的元素，所以我假设浏览器默认为特定的行高，我现在正在寻找一种方法来覆盖它。

---

我在 webkit 基本样式中找不到任何东西可以做到这一点，但请自行检查:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

这不是moz-focus-inner 问题，也不是appearance: none 问题，也不是box-sizing 问题，或者outline 问题，我找不到任何其他解决方案。

---

编辑:有关垂直填充问题，请参阅下面的答案，但我仍在寻找额外的 padding-left: 1px 等价于仅在 webkit 中的文本输入的解决方案和壁虎。 ( http://jsfiddle.net/PncMR/14/ )

Answer 1

在 Webkit 中

Webkit 中 input[type="text"] 的额外垂直“填充”是因为您不能为文本输入提供小于 line-height 的值 normal，不是具体值，but varies depending on the typeface .

我知道这是原因，但我找不到输入从哪里获得这种样式，因为它没有出现在 Webkit UA 样式表中。

在壁虎中

Gecko 中 input[type="text"] 和 input[type="button"] 的额外垂直“填充”是由于用户代理样式表包含:

input {
    line-height: normal !important;
}

用户代理样式表中的

和 !important 声明 cannot be overidden in any way .

结论

在 Webkit 中你不能在 line-height: normal 下，在 Gecko 中你不能有除了 line-height: normal 之外的任何东西，因此最好的解决方案是始终使用 line-height: normal 设置这些元素的样式以获得最佳的一致性，这并不是一个很好的解决方案。理想情况下，我们能够覆盖所有 UA 样式。

---

这些都没有解释像 text-indent 那样的额外 1px，它只出现在两个渲染引擎的 input[type="text"] 上。

---

关心这个的人，应该在这两个 Bugzilla 线程上发表他们的意见:

• https://bugzilla.mozilla.org/show_bug.cgi?id=697451
• https://bugzilla.mozilla.org/show_bug.cgi?id=349259