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

我在同一行上有一个输入文本和一个跨度。
在firefox中，它们没有相同的高度。
在我看来，跨度的高度最低。
让输入文本和跨度具有相同高度的最佳方法是什么

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

命令
​

演示：

附言：

---

不要写可能的副本，因为我不需要将东西垂直对齐到中间。

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

---

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

因为它取决于浏览器，我是否应该为不同的浏览器创建不同的样式？不，只需显式设置所有这些值。它们将覆盖任何浏览器的默认值。否。它不显示相同的高度。请看这个演示：）最重要的是，确保在两个元素上设置相同的字体系列。e、 g.

input，span{font-family:sans-serif；}

-如果一行中有sans&sans-serif字体，则行高可能呈现不同。