<input> 有神秘的底部填充

Question

我正在尝试对某些表单元素进行一些非常精确的样式设置，而这个问题让我很伤心。

如果我尝试从<input>（使用display: block）中删除padding、margin、border 和outline，以便字段的大小完全由文本决定，输入字段最终比任何其他以完全相同的方式样式化的块级元素具有几个像素的额外填充。这是一个例子： 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

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

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

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

Answer 2

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

See fiddle。仅在 FF 中测试。

Answer 3

<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> 的“子”元素设置样式。

这是一个演示，显示了 inline 元素上的最小 line-height。 <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 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。