Ian*_*lor 11 html css firefox webkit
问题只发生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/)
input[type="text"]Webkit中额外的垂直"填充" 是因为您不能为文本输入提供line-height小于的值normal,这不是特定值,而是根据字体而变化.
我知道这是原因,但我无法找到输入将获得此样式的位置,因为它不会出现在Webkit UA样式表中.
Gecko input[type="text"]和input[type="button"]Gecko 上的额外垂直"填充" 是由于用户代理样式表包含:
input {
line-height: normal !important;
}
并且不能以任何方式覆盖!important用户代理样式表中的声明.
你不能line-height: normal在Webkit中使用,除了line-height: normalGecko中的这些元素之外你不能有任何其他东西,所以最好的解决方案是始终设置这些元素的样式line-height: normal以获得最佳的一致性,这不是一个很好的解决方案.理想情况下,我们可以覆盖所有UA样式.
这些都没有考虑text-indent到只有input[type="text"]两个渲染引擎中出现的行为的额外1px .
关心这一点的人应该对这两个Bugzilla线程发表意见: