Il semble que ma barre de menus s'affiche avec une extension de police différente dans Firefox que dans Chrome. Voir ce qui suit:
Voici le CSS appliqué à cet élément:
font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;
Pour autant que je puisse dire, tout ce qui concerne cette police est exactement le même, mais ils s'affichent toujours différemment (voir photo). Pourquoi?
css
firefox
google-chrome
Goro
la source
la source
Réponses:
Chrome utilise le moteur de rendu WebKit. Firefox utilise le moteur Gecko. Les deux interprètent et affichent le type légèrement différemment, tout comme les moteurs graphiques DirectX et Vega utilisés dans IE9 + et Opera.
Vous ne pouvez pas forcer les navigateurs à afficher le texte de manière identique, mais vous pouvez faire quelques choses pour vous assurer que votre navigation occupe la même largeur entre les navigateurs:
Utilisez des images ou des SVG au lieu de taper pour vos éléments de barre de navigation. Cela peut s'avérer utile s'il est peu probable que votre zone de navigation change souvent. par exemple www.apple.com
Fixez la largeur de chaque élément de navigation avec CSS. La taille du texte sera toujours différente d'un navigateur à l'autre, mais si vous donnez à chaque
<li>
élément de votre zone de navigation une largeur de pixel fixe, le cadre de sélection de chaque lien sera très similaire d'un navigateur à l'autre et la largeur totale de la zone de navigation devrait être la même.la source
letter-spacing
les éléments SVG.Les différences de rendu des polices entre les différents navigateurs (et sur les différents systèmes d'exploitation) sont une réalité. Vous devez simplement vous assurer que si la police s'affiche à différentes largeurs, votre conception peut toujours faire face.
la source
Au cas où quelqu'un trouverait cela, le problème était pour moi
letter-spacing
. Chrome et Firefox gèrent la propriété différemment.Mon problème était qu'il
letter-spacing
affectait la position des autres éléments; en particulier certaines images dans le menu de navigation. En supprimant la propriété, mon problème a été résolu instantanément.J'ai également lu que l'utilisation spécifique de
.point
valeurs peut avoir des effets de modification entre les 2 navigateurs, ce qui était vrai dans mon cas.la source
sorte de même problème indiqué ici
vous pouvez réinitialiser votre css en
http://developer.yahoo.com/yui/reset/ espérons au moins que vous obteniez des indices en
la source
J'ai trouvé que le webkit prend en charge px pour la taille de la police, mais pour des choses comme l'espacement des lettres, ils ignoreront tout cela si vous ne les utilisez pas.
la source
Après avoir testé 6 navigateurs / 4 moteurs de rendu sur deux OS. J'ai trouvé que la plupart étaient les mêmes, même avec un interligne. J'examinerai la différence avec Windows et Linux dans une minute.
Je pensais que la police Palatino était disponible partout mais le chrome est tombé à l'époque romaine qui est légèrement plus petite, les polices par défaut ont les mêmes résultats (chrome différent) qui m'induisent un peu en erreur.
Quoi qu'il en soit, si vous spécifiez des heures romaines ou utilisez @fontface pour fournir des fichiers de polices! vous pourrez peut-être rendre vos barres de navigation plus lisses ;-)
la source
J'ai eu un problème similaire et j'ai trouvé une solution:
En utilisant:
Dans Firefox, ça a fière allure. Dans Chrome, l'espacement des lettres était étrange. Supprimer le
optimizelegibility
style a fait l'affaire. Les deux navigateurs s'affichent désormais de manière identique.J'ai décidé de supprimer le style du webkit et de le laisser en place pour les autres navigateurs. Ça va bien maintenant.
la source
J'ai eu un problème similaire avec Open-Sans, cela l'a fait pour moi:
la source