Différence de largeur de bouton entre Firefox et Chrome

Question

Je sais qu'il y a beaucoup de questions CSS FF / Chrome, mais je n'arrive pas à trouver celle-ci exacte.

Voici un JS Fiddle montrant le problème: http://jsfiddle.net/ajkochanowicz/G5rdD/1 /

(Toutes mes excuses pour le long CSS, cela a été copié à partir du site.)

Essentiellement, Firefox et Chrome me donnent deux valeurs différentes pour la largeur la plus intérieure du bouton, 4 et 6. J'aimerais que ce soit 4 ou moins pour les deux.Qu'est-ce qui cause cela?

Answer 1

Vous n'avez pas spécifié de width autre que auto.

Différents moteurs de rendu pensent différemment comment les sites Web doivent être rendus.

Que diriez-vous de changer le width en 4px et :hover en ce que vous voulez?

Answer 2

Essayez d'ajouter le css ci-dessous.Firefox ajoute un rembourrage supplémentaire au bouton.

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

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

Source: http://wtfhtmlcss.com/#buttons-firefox-outline