28173 sujets

CSS et mise en forme, CSS3

Second bug d'affichage IE : polices en italique

Je rencontre un autre bug d'affichage dans Internet Explorer auquel je m'étais déjà heurté. Je ne sais pas s'il est connu et s'il y a une solution.

Lorsque du texte est en italique dans un div, IE calcule apparemment la largeur de celui-ci sans tenir compte de l'italique et lorsque le style est appliqué, le bloc fait quelques pixels de plus en largeur. Ça ne semble pas poser de problème si la largeur du bloc est fixe (la largeur englobe la taille de la police), mais ça peut décaler des éléments adjacents si la largeur est dynamique.

Y a-t-il une solution connue à ce problème (à part ne pas utiliser de texte en italique dans les blocs à largeur dynamique) ?
Modifié par terzag (19 Sep 2006 - 18:18)
Qu'entends-tu par « largeur dynamique » ?
Une largeur non spécifiée, ou bien une largeur spécifiée en pourcentages ?
Une largeur non spécifiée.

EDIT : En fait, je me suis un peu planté sur les caractéristiques du problème : que la largeur soit fixe ou non spécifiée n'entre apparemment pas vraiment en ligne de compte. Le problème semble venir d'une combinaison de la place que prend le texte en largeur qui est mal calculée par rapport aux dimensions du bloc contenant le texte (la taille de la typo doit jouer aussi). Voilà un exemple qui illustre le problème :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<style>
#haut {
width: 600px;
height: 100px;
border-left: solid 10px #000;
border-right: solid 10px #000;
}
#contenu {
width: 600px;
height: 300px;
border-left: solid 10px #000;
border-right: solid 10px #000;
}
#contenu p {
padding: 0 10px;
font-style: italic;
}
</style>
</head>
<body>
<div id="haut"></div>
<div id="contenu">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>


Si le texte du paragraphe est mis en italique, la répartition des mots est mal calculée et les lignes se retrouvent plus longues que prévu ; les deux div (l'entête #haut et le corps #contenu) se retrouvent décalés malgré une largeur en théorie identique.
Si on supprime l'italique du texte, tout s'affiche correctement.

Le problème n'arrive pas avec Firefox.
Modifié par terzag (19 Sep 2006 - 20:53)
Je confirme le bug. Détail « marrant » : si on diminue ou agrandit la taille du texte, le bug disparaît (du moins avec ma configuration).

Ah non, en fait il semblerait que ça soit variable en fonction de la fonte utilisée.

Seule solution trouvée pour l'instant après quelques tests : placer un overflow (auto ou hidden) sur le bloc #contenu.
Sujet clos
Aller à