Pourquoi monoface gras déplacer verticalement sur Windows?

StackOverflow https://stackoverflow.com/questions/2432328

Question

HTML a dans Firefox 3.6, IE7 et Opera 10 sur Windows, un comportement étrange: 

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

La durée gras dans le milieu est décalé vers le bas par un pixel. Cela ne se produit pas pour d'autres polices.

Pourquoi? Comment puis-je résoudre ce problème?

Était-ce utile?

La solution

  

Pourquoi?

Excellente question. Je viens de passer une demi-heure à essayer de comprendre le pourquoi, en vain. La solution de Marcgg ne semble pas fonctionner, que ce soit, le décalage est toujours là. Google se présente rien. Cela ne semble se passer sous Windows, et pas seulement dans les navigateurs que vous mentionnez, mais aussi dans Opera 9 et IE6. Non dans Firefox 2.0 bien. Puzzling.

  

Comment puis-je résoudre ce problème?

La seule solution qui a fonctionné jusqu'à présent pour moi est la suivante: 

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

i.e.., En spécifiant Courier au lieu de monospaces. Cela rend de manière cohérente dans tous les navigateurs que j'ai testé (IE6, Opera 9, FF 2.0 sous Windows 2000, Opera 10, FF 3 et Konqueror sous Ubuntu). Quant à savoir pourquoi, je ne sais toujours pas.

Autres conseils

Il est juste un effet d'optique. Prenez une capture d'écran et zoom:. Vous verrez la ligne de base de texte ne change pas du tout

Il devrait se fixer si vous choisissez un contraste de couleur différente.

Mise à jour

texte alt http://img690.imageshack.us/img690/421/opticaleffect .png

Le problème est la police « Courier New » qui est la police par défaut utilisé mes la plupart des navigateurs Windows lors de la « chasse fixe » est demandée. Pour la variante audacieuse, la ligne de base est à un autre décalage: 

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

Avec ce code, vous pouvez voir que le texte du milieu est décalé vers le haut (= décalage différent de base), mais la couleur de fond est maintenant aligné correctement.

La solution est de demander "Courier" comme une police et d'éviter "Courier New".

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top