css - Firefoxで余分なボタンの間隔/パディングを削除します

Question

次のコード例を参照してください：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ベースのハイパーリンクはキーボードのスペースバーでは機能せず、URLが必要であるため、JavaScriptベースのハイパーリンクを使用したくありませんhref。これは物事を処理するためのクリーンな方法ではありません。

Firefox13以降の私の解決策

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

Answer 1

これを追加：

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

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

上記のルールを含めることborderは、ボタンが両方のブラウザで同じように見えるために必要ですが、ボタンがactiveFirefoxにある場合は点線のアウトラインも削除されます。多くの開発者は、この点線のアウトラインを取り除き、オプションで、より視覚的にわかりやすいものに置き換えます。

Answer 2

入力要素にも修正するには、

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

シンプルで完璧です！

Answer 3

@thirtydotの回答の修正バージョン：

button:: {
    padding: 0px;
    border: 0px;
}

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

Firefox 87について：

• buttoninbutton::-moz-focus-innerをクラスにすることはできません。（例.mybutton::-moz-focus-innerは機能しません）

• スタイルも存在する必要がありbutton { padding:0px; border: 0px; }ます（このスタイルはクラスごとに指定できます）。