html – 如何在Webkit和Gecko的文本输入上删除额外的,不同的伪填充？

问题只发生在Webkit中的input [type =“text”]上.不管我做什么,相当于一个额外的填充：元素上的1px 0 0 1px(仅上和左).

类似的问题发生在Gecko中,输入[type =“text”]有一个等效的额外填充：1px 0 0 1px,输入[type =“button”]有一个额外的填充：1px 0 0 0.

这是一个JSFiddle,显示了我尝试过的一切,没有任何作用：http://jsfiddle.net/PncMR/10/

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

我没有发现任何这样做的webkit基础样式,但随时检查一下自己：

这不是一个moz焦点内部的问题,或外观：没有问题,或者是盒子大小的问题,或大纲问题,我找不到任何其他解决方案.

编辑：请看下面的垂直填充问题的答案,但是我仍然在寻找一个额外的padding-left的解决方案：仅在webkit和gecko中的文本输入上相当于1px. (http://jsfiddle.net/PncMR/14/)

在Webkit中

Webkit中输入[type =“text”]上的额外垂直“padding”是因为您不能给文本输入一个小于正常值的线高值,这不是一个特定的值but varies depending on the typeface.

我知道这是原因,但我无法找到输入将获得此样式的位置,因为它不会出现在Webkit UA样式表中.

在壁虎

Gecko中输入[type =“text”]和input [type =“button”]上的额外垂直“padding”是由于user-agent样式表包含：

input {
    line-height: normal !important;
}

和！用户代理样式表cannot be overidden in any way中的重要声明.

结论

你不能在线高度下：在Webkit中是正常的,并且您不能在Gecko中的这些元素上具有除line-height之外的任何东西：正常的,所以最好的解决方案是总是使用line-height来定义这些元素：normal获得最佳的一致性,这不是一个很好的解决方案.理想情况下,我们可以覆盖所有的UA风格.

这两个都不会影响两个渲染引擎中只显示在输入[type =“text”]上的文本缩进的额外1px.

关心这个的人应该就这两个Bugzilla主题发表意见：