问题只发生在 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/ )
在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线程发表意见:
在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线程发表意见:
发生这种情况的原因是因为浏览器正在处理内容 <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的回答中所述)。