Comment corriger l'espacement excessif des boutons dans Firefox ?

Correction de l'espacement des boutons dans Firefox

Dans Firefox, les boutons ont tendance à avoir un remplissage et un espacement supplémentaires par rapport aux autres navigateurs. Cela peut constituer un obstacle esthétique, en particulier lorsqu'il s'agit de maintenir une conception cohérente sur différents navigateurs.

Pour éliminer cet espacement, ajoutez le CSS suivant :

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

Cette règle cible le "focus interne" pseudo-élément, spécifique à Firefox. En définissant les propriétés padding et border à zéro, l'espacement supplémentaire est supprimé.

De plus, il est conseillé d'inclure la propriété border dans la règle. En effet, définir le remplissage sur zéro supprime le contour en pointillés qui apparaît autour du bouton lorsqu'il reçoit le focus dans Firefox. Certains développeurs choisissent de supprimer entièrement ce contour, tandis que d'autres le remplacent par un élément visuellement plus attrayant.

Avec ce CSS en place, les boutons auront un espacement et une apparence cohérents dans Firefox et les autres navigateurs. Reportez-vous à l'exemple JSFiddle mis à jour ci-dessous pour une comparaison visuelle :

[JSFiddle mis à jour](http://jsfiddle.net/thirtydot/Z2BMK/1/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!