问题 如何在Webkit和Gecko中删除文本输入上的额外和不同的伪填充?


问题只发生在 input[type="text"] 在Webkit中。无论我做什么,都有相当于额外的东西 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和gecko中的文本输入上等效。 ( http://jsfiddle.net/PncMR/14/ )


8699
2018-01-24 02:40


起源



答案:


在Webkit中

额外的垂直“填充” input[type="text"] 在Webkit中是因为你无法给出文本输入 line-height 价值小于 normal,这不是具体的价值, 但取决于字体

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

在壁虎

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

input {
    line-height: normal !important;
}

!important 用户代理样式表中的声明 不能以任何方式被覆盖

结论

你不能去 line-height: normal 在Webkit中,你不能拥有任何东西 line-height: normal 关于Gecko中的这些元素,所以最好的解决方案是始终使用这些元素 line-height: normal 获得最佳的一致性,这不是一个很好的解决方案。理想情况下,我们可以覆盖所有UA样式。


这些都不能解释额外1px的行为 text-indent 只出现在 input[type="text"] 在两个渲染引擎中。


关心这一点的人应该对这两个Bugzilla线程发表意见:


8
2018-01-24 02:58



首先应用UA样式表,对吗?你可以覆盖 !important 和另外一个 !important。最后一个(假设具有相同的特异性)优先。 - ThinkingStiff
有人会想,但是我联系的第二篇文章做了研究,发现无论他怎么努力都不是这样的。 UA!重要事项必须有特殊情况。我添加的bug线程也为此提供了保证。 - Ian Storm Taylor
从Firefox 30开始,这两个错误都被标记为已修复。 - Nickolay


答案:


在Webkit中

额外的垂直“填充” input[type="text"] 在Webkit中是因为你无法给出文本输入 line-height 价值小于 normal,这不是具体的价值, 但取决于字体

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

在壁虎

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

input {
    line-height: normal !important;
}

!important 用户代理样式表中的声明 不能以任何方式被覆盖

结论

你不能去 line-height: normal 在Webkit中,你不能拥有任何东西 line-height: normal 关于Gecko中的这些元素,所以最好的解决方案是始终使用这些元素 line-height: normal 获得最佳的一致性,这不是一个很好的解决方案。理想情况下,我们可以覆盖所有UA样式。


这些都不能解释额外1px的行为 text-indent 只出现在 input[type="text"] 在两个渲染引擎中。


关心这一点的人应该对这两个Bugzilla线程发表意见:


8
2018-01-24 02:58



首先应用UA样式表,对吗?你可以覆盖 !important 和另外一个 !important。最后一个(假设具有相同的特异性)优先。 - ThinkingStiff
有人会想,但是我联系的第二篇文章做了研究,发现无论他怎么努力都不是这样的。 UA!重要事项必须有特殊情况。我添加的bug线程也为此提供了保证。 - Ian Storm Taylor
从Firefox 30开始,这两个错误都被标记为已修复。 - Nickolay


发生这种情况的原因是因为浏览器正在处理内容 <input> 好像它是一个内联元素,不管它是什么 display 设置 <input>。内联元素具有最小高度,如下所示: http://jsfiddle.net/ThinkingStiff/zhReb/

您可以通过创建“child”元素来覆盖此行为 inline-block。你可以这样做 first-line 伪元素。

input:first-line {
    display: inline-block;    
}

我将详细介绍为什么这是我对另一个问题的回答: https://stackoverflow.com/a/8964378/918414

这在Firefox中不起作用,但出于另一个原因:Firefox的UA样式表(如@ Ian的回答中所述)。


4
2018-01-24 03:47



刚刚验证过,这在Webkit中有效,但遗憾的是在Firefox中没有。 - Ian Storm Taylor
@IanStormTaylor我更新了我的答案以反映这一点。 - ThinkingStiff
这在Webkit中对我有用。有人找到Firefox的修复程序吗? - crush