问题只发生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/)
我希望我可以将块元素的行高设置为零,然后该元素内的每个行框将仅根据其内容的行高来对齐.但是,当我尝试在这些内联元素上使用非常小的字体时,它们似乎与行中内容所需的基线不一致.我对CSS规范的理解并不符合所有浏览器的渲染要求; 我有什么不对？
简单演示的代码看起来像这样(而且它也是一个小提琴):
body {
font-size:60px;
}
div {
height:3em;
width:8em;
border:1px solid black;
line-height:0; /* minimum line height for contained elements */
}
span {
line-height:normal; /* don't inherit from containing block */
background-color: #cff; /* so we can see positioning */
}
<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>
根据CSS规范:
在内容由内联级元素组成的块容器元素上,"line-height"指定元素中线框的最小高度.
在未替换的内联元素中,'line-height'指定用于计算线框高度的高度.
我知道,对于一个简单的例子,有很多方法可以破解小文本的位置并使其最终位于包含块的顶部,但我真的很想了解文本的实际原因正在排队.