我试图在一些表单元素上做一些相当精确的样式,这个问题让我感到很悲伤.
如果我尝试从< 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>将跟随它后面的任何块级元素的高度相同？
解决方法
<输入>具有基于字体大小的最小行高.将两个元素设置为更大的行高值,以及完全删除行高.但是,这仍然不允许你有比最小值更小的高度.解决方法是使用第一行伪元素并将其设置为显示：inline-block;.
演示：http://jsfiddle.net/ThinkingStiff/B7cmQ/
CSS：
.normalised:first-line {
display: inline-block;
}
但这并不能解释为什么< input>与< div>的行为不同.甚至-webkit-appearance：none;没有解决它.似乎在输入上有一些看不见的伏都教将其内容视为内联.内联元素具有基于字体大小的最小行高,这是我们在这里看到的行为.这就是为什么第一线修复它的原因.它似乎是< input>的“child”元素的样式.
这是一个演示,显示内联元素的最小行高. < div>元素荣誉行高：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;
}
