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

Question

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

<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>

这是我的小提琴：http://jsfiddle.net/86sZ7/

在Chrome中看起来不错，但在Firefox中，文字输入字段的下边框缺少一块。如果我设置溢出：隐藏到跨度然后它看起来没问题，但提交按钮向下移动。 我想让它在Chrome和Firefox中看起来一样。另外：将提交按钮与其他输入对齐也很好，因为现在它有点偏离。