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

尤里卡！

此答案中的解决方案完全消除了高度差：

.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"/>