如何设置输入“文本”的高度和跨度相同的值

Question

我在同一行上有输入文字和跨度 在Firefox中，它们没有相同的高度 对我来说，似乎跨度的高度最低 输入文本和跨度具有相同高度的最佳方法是什么？

<div class="form">
    <input type="text" required="required" class="data-item">
    <span class="add-on">Orders</span>
</div>​

演示：http://jsfiddle.net/BeLDD/7

P.S .: 不要写How to make <span> the same height as <input type=“text”>的可能副本，因为我不需要将事物垂直对齐到中间。

Answer 1

输入标记的总高度包括其边框和填充。不幸的是，这些默认值因浏览器而异。

使用CSS在跨度和输入上显式设置边距，边框和填充（以及字体大小），直到它们达到所需的大小。由于输入具有边框且您的跨度（可能）不是，因此您需要根据您的设计单独进行这些调整。