Les padding fantômes des boutons sous Firefox

Après Internet Explorer, au tour de Firefox : certaines maquettes d'application d'un de nos clients sont construites au pixel près ; et quand il s'agit de boutons, les différences entre firefox et les autres navigateurs devient problématique...

<p><button><span>texte</span></button></p>
Code HTML d'un bouton.
button {
    padding: 0;
    border: 1px solid #ccc;
    background-color: #eee;
}
button > span {
    display: block;
    background-color: #ff0;
}
Règles css appliquées.

Capture d'écran

Résultats.

Le résultat n'est pas du tout le même sous Firefox et sous les autres navigateurs. On voit subsister des marges internes qui n'en sont pas vraiment. Il s'agit en fait d'un espace créé pour assurer l'affichage del'outline du focus. Pour corriger cela, il faut explicitement supprimer cet espace :

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
Suppression de l'espace de l'outline.