Il s'agit d'un problème moins visible. Lorsque les polices chinoises et anglaises sont mélangées dans le navigateur IE, un désalignement se produit souvent.
Alors le doute revient, qu’est-ce qui cause l’écart entre le chinois et l’anglais ? ! Quelle est la solution ? ! Ainsi, après mes tests, j'ai trouvé deux situations (bien sûr, il peut y avoir d'autres situations provoquantes. Vous pouvez l'essayer vous-même). Les éléments adjacents des objets chinois et anglais ont le paramètre d'attribut d'alignement vertical (comme la petite image précédente, ou la zone de texte, nous devons les aligner verticalement. Généralement, lorsque nous définissons vertical-align:middle; pour les images et les zones de texte (tout autre élément de bloc en ligne), cela affectera le désalignement du chinois et de l'anglais.
Une autre situation est que lorsque l'élément parent (à l'exception des tableaux) a l'attribut d'alignement vertical défini, le chinois et l'anglais des éléments enfants à l'intérieur seront également mal alignés.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<titre>Tester</titre>
<style type="text/css">
* { marge :0 ; remplissage :0 ;
html{arrière-plan :#fff}
corps { position : relative ; police : 12px/1.6em Verdana, Lucida, Arial, Helvetica, Song Dynasty, couleur sans empattement : #333 ;
</style>
</tête>
<corps>
<div style="vertical-align:middle;">
<a href="">Pourquoi suis-je toujours mal aligné ? pourquoi ??</a>
</div>
</corps>
</html>
Comment résoudre ce problème ? !
Parlons d'abord du premier, qui est la solution au problème de désalignement causé par le milieu vertical des éléments adjacents :
ajoutez un zoom:1 aux objets chinois et anglais pour déclencher sa mise en page. Grâce à la recherche, il s'avère qu'une fois. il a une disposition hashout, les objets chinois et anglais il n'y aura pas de désalignement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<titre>Tester</titre>
<style type="text/css">
* { marge :0 ; remplissage :0 ;
html{arrière-plan :#fff}
corps { position : relative ; police : 12px/1.6em Verdana, Lucida, Arial, Helvetica, Song Dynasty, couleur sans empattement : #333 ;
</style>
</tête>
<corps>
<div>
<a href="" style="zoom:1;">Pourquoi suis-je toujours mal aligné ? pourquoi ??</a>
</div>
</corps>
</html>
Le deuxième cas est la solution au problème de désalignement causé par le milieu vertical de l'élément parent :
ajoutez la phrase vertical-align:baseline aux objets chinois et anglais pour résoudre le problème !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<titre>Tester</titre>
<style type="text/css">
* { marge :0 ; remplissage :0 ;
html{arrière-plan :#fff}
corps { position : relative ; police : 12px/1.6em Verdana, Lucida, Arial, Helvetica, Song Dynasty, couleur sans empattement : #333 ;
</style>
</tête>
<corps>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">Pourquoi suis-je toujours mal aligné ? pourquoi ??</a>
</div>
</corps>
</html>
Mais nous pouvons voir que le soulignement semble trop serré. À ce stade, nous devons encore ajouter zoom:1 pour déclencher son hasLayout afin d'éviter d'être trop serré ! .
<a href="" style="zoom:1;"vertical-align:baseline;">Pourquoi suis-je toujours mal aligné ? pourquoi ??</a>
Si vous rencontrez d'autres situations où le chinois et l'anglais sont mal alignés. Dans ce cas, vous pouvez également essayer d'utiliser les deux méthodes ci-dessus pour résoudre le problème. Bien entendu, le moyen le plus sûr et le plus efficace consiste à utiliser Song Dynasty en chinois et en anglais.