Html 内联输入字段在浏览器中的行为不同

我在网页上有一个数量选择器。我使用了一个技巧，使它们没有任何间隙地内联

<div id="quantitybar">                        
    <span class="inputwrapper">
        <button id="piece_plus">+</button>
        <input type="text" value="1" id="pieces" />
        <button id="piece_minus">-</button>
    </span>
    <input type="submit" value="Add to cart" />                        
</div>

+
-

这是我的小提琴：

它在Chrome中看起来不错，但在Firefox中，文本输入字段的下边框缺少一块。如果我将overflow:hidden设置为span，那么它看起来是正常的，但是submit按钮向下移动。

---

我想让它在Chrome和Firefox中看起来一样。另外：将提交按钮与其他输入对齐也很好，因为现在它有点关闭。

在我的chrome浏览器和firefox浏览器上它们看起来一样。在我的情况下，它在FF和chrome浏览器上都能完美工作。