Hauteur de ligne FireFox 3

Question

Firefox 3 a introduit un nouveau comportement dans lequel la hauteur de ligne, lorsqu'elle n'est pas définie, diffère de la façon dont les autres navigateurs le rendent. Ainsi, une section critique peut paraître trop haute dans ce navigateur. Définir un pourcentage global ne fonctionne pas, car sa base est différente. Définition d’une valeur sans unité telle que & "; 1 &"; ne fonctionne pas non plus. Existe-t-il un moyen de normaliser cette dimension?

Answer 1

La valeur calculée de line-height: normal varie selon les plates-formes, les navigateurs (et les différentes versions du même navigateur, comme vous l'indiquez), les polices et même des tailles différentes de la même police (voir l'article d'Eric Meyer) .

Définition d'une valeur sans unité telle que ...

body {line-height: 1.2;}

... devrait normaliser l’espacement entre les navigateurs. Si cela ne fonctionne pas, pouvez-vous fournir une description plus détaillée de votre feuille de style?

Il est difficile (impossible?) d'obtenir & "pixel-perfect &"; résultats, mais afin d’obtenir des résultats aussi prévisibles que possible, j’essaie d’utiliser une hauteur de ligne qui produit une belle valeur arrondie lorsqu’elle est multipliée par la taille de la police. Nous ne pouvons pas connaître la taille de police par défaut de l'agent utilisateur, mais 16 pixels sont assez communs.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

Si la taille de police de départ de l'agent utilisateur est effectivement de 16 pixels, la hauteur de ligne de 1.5 est de 24 pixels. Les utilisateurs peuvent modifier la taille de la police ou le zoom de la page par défaut, mais différents navigateurs utilisent différentes méthodes pour redimensionner la page. Néanmoins, je pense avoir eu un succès raisonnable pour la majorité des utilisateurs. Si je ne parviens pas à définir exactement la hauteur de la ligne, je tire un peu au-dessus de l'entier au lieu d'un peu en dessous, car certains navigateurs semblent tronquer les valeurs plutôt que les arrondir.

Notez également que si vous utilisez un pourcentage pour la hauteur de ligne, il se comporte différemment lorsque la valeur est héritée.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

À partir d'une taille de police de base de 16 pixels, la hauteur de ligne sera de 24 pixels. Dans un élément <p>, la taille de la police passe à 12 pixels, mais la hauteur de ligne ne pas à 18 pixels, mais reste à 24 pixels. C'est la différence entre line-height: 1.5 et line-height: 150%. Lorsque body {line-height: 1.5;} est utilisé, la hauteur de ligne pour <=> est 18 pixels.

Answer 2

Vous ne pouvez absolument rien faire. Chaque navigateur a le moyen de rendre le contenu CSS et CSS. Vous pouvez utiliser un & Quot; Master & Quot; réinitialiser (comme le suggère cowgod), mais même dans ce cas, cela ne résoudra pas les problèmes d’alignement. Ils sont là en raison du moteur de rendu réel. Appliquez le code CSS à votre site Web existant et testez-le. Dites-moi si cela rend pixel parfait à travers le conseil. Ce ne sera pas le cas.

La seule façon d'atteindre réellement la perfection en pixels est d'implémenter des CSS spécifiques pour des navigateurs spécifiques. Mozilla a le @ -moz-doc , IE a ses propres bidouilles , mais aucun d’entre eux ne fait partie des spécifications du W3C, et nous savons tous que les normes sont importantes. Donc, pas vraiment une option.

Comme David l'a dit plus haut, c'est difficile. Je suis enclin à penser impossible en fait. Et j'ai passé des heures à essayer, croyez-moi! Je suis presque devenu fou plus de fois que je tiens à compter. C'est une pilule difficile à avaler, mais il n'y a pas moyen de la contourner, à moins que tout le monde utilise le même moteur de navigation (ce qui ferait en réalité un grand bond en avant pour Internet). Je veux dire, il ne serait pas si difficile de claquer l'interface que vous voulez sur votre navigateur, aussi longtemps que vous plugin [gecko] [webkit] [presto] [trident] [peu importe] pour gérer le backend ... Depuis le bon ceux qui sont tous open source, vous pouvez fusionner les projets et vraiment y aller. Les gens doivent apprendre à bien jouer ensemble;)

Answer 3

Vous POUVEZ résoudre ce problème:

Définissez la hauteur de ligne sur 1, puis remettez à zéro dans votre texte à l'aide des touches padding-top et padding-bottom, puis définissez la hauteur sur auto.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
} 

Answer 4

Vous devriez toujours " réinitialiser " styles pour éliminer toutes les incohérences du navigateur avec les styles d'élément.

J'aime Eric Meyer Réinitialisation CSS . Yahoo en a un également.