web-dev-qa-db-fra.com

Supprimer l'espacement / remplissage supplémentaire des boutons dans Firefox

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

Chrome/IE8 ressemble à ceci

enter image description here

Firefox ressemble à ceci

enter image description here

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 rendre le bouton identique dans les deux navigateurs? Je ne veux pas utiliser d'hyperliens basés sur JavaScript car ils ne fonctionnent pas avec la barre d'espace sur le clavier et il doit avoir une URL href qui n'est pas une manière propre de gérer les choses.

Ma solution, depuis Firefox 13

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

cssfirefoxbuttonspacing
81
Bryan Field

Ajoute ça:

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

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

L'inclusion de la règle border ci-dessus est nécessaire pour que les boutons soient identiques dans les deux navigateurs, mais cela supprime également le contour en pointillé lorsque le bouton est active dans Firefox. Beaucoup de développeurs se débarrassent de ce contour en pointillé, le remplaçant éventuellement par quelque chose de plus visuellement convivial.

164
thirtydot

Pour le fixer sur les éléments d'entrée ainsi ajouter

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 simple parfait!

8
Marcelo Hexsel