[解決済み] Firefox の余分なボタンの間隔やパディングを削除する

質問

このコード例を参照してください。 http://jsfiddle.net/Z2BMK/

Chrome/IE8はこのようになります。

Firefoxはこのようになります。

私のCSSは

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

どちらのブラウザでも同じボタンになるように、コードサンプルを変更するにはどうしたらよいでしょうか。JavaScriptベースのハイパーリンクはキーボードのスペースバーで動作しないので使いたくありませんし、ボタンも href という URL が必要で、これはきれいな処理方法ではありません。

Firefox 13 以降の私の解決策

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

どのように解決するのですか？

これを追加してください。

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

を含む border ルールを含めることは、ボタンが両方のブラウザで同じように見えるために必要ですが、同時に、ボタンが active であるときに点線の輪郭を削除します。多くの開発者はこの点線の輪郭を削除し、オプションでより視覚的に優しいものに置き換えています。