Problème d'alignement de soulignement dans les polices chinoises et anglaises sous IE-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

Problème d'alignement de soulignement dans les polices chinoises et anglaises sous IE

Aug 21, 2017 pm 12:01 PM

ie 下划线

Décrivez d'abord le problème : comme le montre l'image, lorsqu'une ligne de texte contient à la fois de l'anglais et du chinois sous IE, le soulignement du lien se rompt, ce qui signifie que le chinois et l'anglais ne sont pas alignés pour le moment ! (FIREFOX n'est pas concerné par ce problème)

Problème dalignement de soulignement dans les polices chinoises et anglaises sous IE

Cependant, après tests, cette situation ne se produira pas lorsque le lien est défini directement sur la page par défaut !

Code

<!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">
 <head> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <title>php中文网</title> 
  <style type="text/css">
   * { 
          margin:0; 
          padding:0; 
      } 
   html { 
   background:#fff; 
   } 
   body { 
   position:relative; 
   font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; 
   color:#333; 
   } 
   </style> 
 </head> 
 <body> 
  <div> 
   <a href="http://www.php.cn" id="aa" title="php中文网"><img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   
   style="vertical-align:middle;" alt="php中文网" />
   </a> 
   <a href="">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Copier après la connexion

Problème dalignement de soulignement dans les polices chinoises et anglaises sous IE

Puis 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, les sous-éléments chinois et anglais à l'intérieur seront également mal alignés.

Code

<!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">
 <head> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <title>php中文网</title> 
  <style type="text/css">
   * { margin:0; padding:0; } 
   html { background:#fff; } 
   body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } 
   </style> 
 </head> 
 <body> 
  <div style="vertical-align:middle;"> 
   <a href="http://www.php.cn" id="aa" title="php中文网"><img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Copier après la connexion

Comment résoudre ce problème ? !

Parlons d'abord de la première solution, qui est la solution au problème de déviation 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 aléatoire. Grâce à la recherche, nous avons trouvé. qu'une fois qu'il aura une mise en page, il n'y aura aucun désalignement entre le chinois et l'anglais.

Zone de code

<!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">
 <head> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <title>php中文网</title> 
  <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> 
 </head> 
 <body> 
  <div> 
   <a href="http://www.php.cn" id="aa" title="php中文网">
   <img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"     style="max-width:90%" alt="php中文网" /></a> 
   <a href="" style="zoom:1;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Copier après la connexion

Le deuxième cas est la verticale du parent element Solution au problème de désalignement causé par -middle : ajoutez la phrase vertical-align:baseline aux objets chinois et anglais pour le résoudre !

Zone de code

<!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">
 <head> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <title>php中文网</title> 
  <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> 
 </head> 
 <body> 
  <div style="vertical-align:middle;"> 
   <a href="http://www.php.cn" id="aa" title="php中文网"><img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Copier après la connexion

Mais on voit que le soulignement semble trop serré , à ce stade, nous devons encore ajouter zoom:1 pour déclencher son hasLayout afin d'éviter un ajustement trop serré !

Zone de code

<!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">
 <head> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <title>php中文网</title> 
  <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> 
 </head> 
 <body> 
  <div style="vertical-align:middle;"> 
   <a href="http://www.php.cn" id="aa" title="php中文网"><img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Copier après la connexion

Si vous rencontrez d'autres situations dans lesquelles le chinois et l'anglais ne sont pas correctement alignés, alors vous pouvez également essayer d'utiliser les deux méthodes ci-dessus pour le résoudre. Bien sûr, la solution la plus sûre et la plus efficace consiste à utiliser la police Song en chinois et en anglais.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn