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

這產生在彼此旁邊的兩個按鈕與鉻相同的高度。不過，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"/>