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

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

PS：不要写可能的重复，How to make <span> the same height as <input type=“text”&gt;因为我不需要垂直对齐到中间的东西。

Answer 1

输入标签的总高度包括它的边框和内边距。不幸的是，这些默认值因浏览器而异。

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