Suppression de l'espacement/du remplissage des boutons dans Firefox

Question

Voir cet exemple de code : http://jsfiddle.net/Z2BMK/

Chrome/IE8 ressemble à ceci

Firefox ressemble à ceci

Mon CSS est

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

Comment puis-je modifier l'exemple de code pour que le bouton soit le même dans les deux navigateurs ? Je ne veux pas utiliser d'hyperliens basés sur JavaScript car ils ne fonctionnent pas avec la barre d'espacement du clavier et il faut que le bouton ait un numéro d'identification. href URL, ce qui n'est pas une façon propre de gérer les choses.

Ma solution, depuis Firefox 13

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

Answer 1

Ajoutez ceci :

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

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

Y compris le border est nécessaire pour que les boutons aient la même apparence dans les deux navigateurs, mais elle supprime également le contour en pointillés lorsque le bouton est active dans Firefox. De nombreux développeurs se débarrassent de ce contour en pointillés, en le remplaçant éventuellement par quelque chose de plus agréable à l'œil.

Answer 2

Pour le fixer également sur les éléments d'entrée, ajoutez

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

est tout simplement parfait !

Answer 3

Version corrigée de la réponse de @thirtydot :

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

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

En ce qui concerne Firefox 87 :

• button en button::-moz-focus-inner ne peut pas être une classe. (Ex. .mybutton::-moz-focus-inner ne fonctionne pas)

• Il doit y avoir un button { padding:0px; border: 0px; } style présent également (Ce style peut être donné par classe).