<input />有神秘的底部填充

Question

我试图在某些表单元素上做一些非常精确的样式，这个问题让我感到非常悲伤。

如果我尝试从padding（margin）删除border，outline，<input>和display: block，那么尺寸该字段纯粹由文本确定，输入字段最终具有几个像素额外填充，而不是任何其他块级元素以完全相同的方式设置。这是一个例子： http://jsfiddle.net/nottrobin/b9zfa/

<input class="normalised testSubject" value="hello" />
<div class="normalised testSubject">hello</div>

渲染：

在该示例中，<div>的计算高度为16px，而<input>的计算高度为19px。

我在Chrome 16，Firefox 9和Opera 11中都有相同的行为，所以它显然可以独立于引擎。

我可以通过手动添加高度来修复此问题，但我不想这样做，因为我希望设计保持responsive。

任何人都可以帮助我理解这里发生了什么，以及我如何可靠地确保<input>与其后的任何块级元素的高度相同？

Answer 1

<input>根据字体大小至少line-height。将两个元素设置为更大的line-height值，就像完全删除line-height一样。但是，这仍然不允许你有比最小值更小的高度。解决方法是使用first-line伪元素并将其设置为display: inline-block;。

演示：http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS：

.normalised:first-line {
    display: inline-block;    
}

但这并不能解释为什么<input>的行为与<div>不同。即使-webkit-appearance: none;也没解决它。似乎在输入上有一些看不见的伏都教将其内容视为inline。根据字体大小，inline个元素的最小值为line-height，这是我们在此处看到的行为。这就是first-line修复它的原因。它似乎是<input>的“子”元素的样式。

这是一个演示，显示line-height元素的最小inline。 <div>元素尊重line-height: 7px;。 <span>，即使其计算值显示为7px;，也不会直观地表达它。

演示：http://jsfiddle.net/ThinkingStiff/zhReb/

输出：

HTML：

<div id="container"> 
    <div id="div-large">div <br />large</div> 
</div> 
<div id="container"> 
    <div id="div-medium">div <br />med</div> 
</div> 
<div id="container"> 
    <div id="div-small">div <br />small</div> 
</div> 
<div id="container"> 
    <span id="span-large">span <br />large</span> 
</div> 
<div id="container"> 
    <span id="span-medium">span <br />med</span> 
</div> 
<div id="container"> 
    <span id="span-small">span <br />small</span> 
</div> 

CSS：

#container { 
    background-color: lightblue;   
    display: inline-block; 
    height: 200px; 
    vertical-align: top; 
}

#div-large { 
    line-height: 50px; 
} 

#div-medium { 
    line-height: 20px; 
} 

#div-small { 
    line-height: 7px; 
}

#span-large { 
    line-height: 50px; 
    vertical-align: top; 
} 

#span-medium {
    line-height: 20px; 
    vertical-align: top; 
} 

#span-small {
    line-height: 7px;
    vertical-align: top;
}

Answer 2

删除line-height似乎可以解决问题。

See fiddle。仅在FF tho中测试。

Answer 3

您确定他们使用完全相同的字体（包括尺寸）吗？

尝试将box-sizing: border-box添加到input。

我自己从来没有遇到过这个问题，但我只是在IE9中的某个地方用过它...

Answer 4

我知道我这个问题要迟到几个月了，但是我在Google搜索中遇到了这个问题，想要添加一些可能有助于澄清Firefox中<input>元素的其他答案的内容

Firefox中的默认表单样式包括一些尴尬的CSS：

input {
   ...
   line-height: normal !important;
   ...
}

这使得实际上无法覆盖Firefox中任何表单输入的line-height属性。这个问题已经存在多年了，虽然对于FF开发人员而言，从规则中删除!important似乎是不费吹灰之力的，但我认为这样做有一些底层实施问题。此外，显然有一些网站（包括YouTube） 依赖 来处理此规则的行为。

有关详细信息和大量讨论，请参阅Mozilla bug #349259。在456bereastreet.com还有一篇很好的博客文章，以及另一位（年长的）Eric Meyer在meyerweb.com的博客文章。