Différence entre le rembourrage de Firefox et Chrome

Question

Il y a une différence dans la façon dont Firefox et Chrome rendent le padding en CSS. ce qui semble correct dans Chrome est excessivement rembourré dans Firefox. y a-t-il un moyen de résoudre?

.button {
    font-family: helvetica, arial;
    font-size: 64px;
    width: 70px;
    height: 45px;
    font-weight: bold;
    padding: 0px;
    padding-top: 25px;
    background-color: #000;
    color: #fff;
    text-align: center;
    float: right;
    margin: 7px 10px 0 0;
}

Answer 1

Si votre .button est un bouton, ceci pourrait être lié à un problème de focus interne de Mozilla... essayez ceci ?

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

Answer 2

Firefox et Chrome rendent padding exactement de la même manière. Votre problème se situe ailleurs.

Utilisez-vous une réinitialisation CSS? Sinon, la déclaration par défaut de line-height pourrait interagir avec le rendu de votre bouton.

Pour commencer, votre height est beaucoup plus petit que votr font-size. Comme vous n'avez pas spécifié overflow, votre height sera toujours étendue au moins à la valeur de font-size (ou à ce que votre line-height spécifie).

Si votre classe .button est en réalité un élément , appliquez également la solution superUntiled.

Answer 3

La correction focus-inner fonctionne mais j'ajoute également des marges négatives en haut et en bas pour l'ajuster à la bonne hauteur. par exemple :

*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}

Je l'habitude d'aimer Firefox, mais il est devenu un désordre gonflé et est sorti de ma liste de Noël il y a des années.

Answer 4

Vous avez en réalité raison - il y a un bug dans Firefox où la hauteur de ligne de l'élément bouton ne peut pas être modifiée avec la propriété CSS line-height.

Voir ce lien pour plus de détails : http://www.cssnewbie.com/input-button-line-height-bug/

La solution est d'utiliser le rembourrage au lieu de la hauteur de ligne.

Answer 5

Vous pouvez définir un padding différent pour Firefox

.button {
   padding:0;
}

@-moz-document url-prefix() {
    .button {
       padding:10px;
    }
}