在 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 的超鏈接，因為它們不能與鍵盤上的空格鍵一起使用，而且它必須有一個href URL，這不是一種處理事情的干凈方式。

我的解決方案，因為 Firefox 13

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規則對於按鈕在兩種瀏覽器中看起來相同是必要的，而且當按鈕在 Firefox 中active時，它也會刪除虛線輪廓。 許多開發人員擺脫了這種虛線輪廓，可選擇用視覺上更友好的東西替換它。

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：

• button button::-moz-focus-inner中的button::-moz-focus-inner不能是類。 （例如.mybutton::-moz-focus-inner不起作用）

• 必須有一個button { padding:0px; border: 0px; } button { padding:0px; border: 0px; } button { padding:0px; border: 0px; }本風格以及（此風格可以每類給出）。