web-dev-qa-db-ja.com

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

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

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

enter image description here

Firefoxはこんな感じ

enter image description here

私のCSSは

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

コードサンプルを変更して、両方のブラウザでボタンを同じにするにはどうすればよいですか？ JavaScriptベースのハイパーリンクはキーボードのスペースバーでは機能せず、href URLを使用する必要があるため、JavaScriptを使用したくありません。

Firefox 13以降の私のソリューション

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

cssfirefoxbuttonspacing
81
Bryan Field

これを追加：

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

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

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

164
thirtydot

入力要素でも修正するには、追加します

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

シンプルで完璧です！

8
Marcelo Hexsel