<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中获得相同的行为,因此它显然使引擎独立.

我可以通过手动添加高度来解决问题,但我不想这样做,因为我希望设计保持响应.

任何人都可以帮助我理解这里发生了什么,以及我如何能够可靠地确保它与<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;
}