Pourquoi mes boutons sont-ils espacés différemment dans Firefox ?

Différence d'espacement des boutons Firefox

Dans un scénario multi-navigateur, vous pouvez rencontrer des incohérences dans l'apparence et l'espacement des boutons entre Chrome/IE8 et Firefox. Firefox présente un espacement supplémentaire qui n'est pas présent dans les autres navigateurs. Pour remédier à cela, nous devons remédier aux différences de style.

Le CSS personnalisé fourni définit l'apparence du bouton, y compris le remplissage, l'arrière-plan, la couleur, les bordures et les marges. Cependant, Firefox ajoute un contour supplémentaire autour du bouton, ce qui entraîne une différence d'espacement perçue.

Pour résoudre ce problème, ajoutez le CSS suivant à votre code :

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

Cette règle CSS cible le anneau de focus dans Firefox et définit son remplissage et sa bordure à zéro. Il élimine le contour supplémentaire et aligne l'apparence du bouton sur celle des autres navigateurs.

En mettant en œuvre cette solution, vous pouvez garantir que vos boutons ont un espacement cohérent dans tous les principaux navigateurs, améliorant ainsi l'expérience utilisateur en conservant le visuel. uniformité.

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!