Firefox中按钮高度渲染不一致 - 为什么输入元素更高？

Question

考虑以下两个要素：

<button type="submit" class="button">Test</button>
<a href="#" class="button">Test 2</a>

...使用以下样式定义：

.button {
    background-color: yellow;
    color: white;
    border: 1px solid orange;
    display: inline-block;
    font-size: 24pt;
    padding: 2px 16px;
    text-decoration: none;
}

这会产生两个彼此相邻的按钮，在Chrome中具有相同的高度。但是，Firefox渲染左侧的按钮，其高度1px大于右侧的按钮（<a>）：

^{（我把上面的图像放大了2倍。）}

要让两个按钮具有相同的高度，我需要做什么？似乎font-size导致问题 - 但我需要该属性。

---

小提琴：http://jsfiddle.net/FfRPY/

Answer 1

<强>尤里卡！

this answer中的解决方案完全消除了高度差：

.button::-moz-focus-inner {
  border: 0;
}

Answer 2

使用此代码：

.button {
    background-color: yellow;
    border: 1px solid orange;
    color: white;
    display: inline-block;
    font-family: arial;
    font-size: 24pt;
    line-height: 40px;
    overflow: visible;
    padding: 2px 16px;
    text-decoration: none;
    vertical-align: top;
}

<a href="#" class="button">Test 2</a>
<input type="submit" class="button" value="Test 2"/>