firefox - Firefox でのボタンの高さのレンダリングの不一致 - 入力要素の高さが高いのはなぜですか?

Question

次の 2 つの要素を検討してください。

<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 で同じ高さの 2 つのボタンが隣り合わせに生成されます。ただし、Firefox は左側のボタンを右側のボタン ( )1pxよりも高い高さでレンダリングします。<a>

  ^{（上の画像を2倍に拡大しました。）}

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