Maison interface Web tutoriel HTML Problème d'alignement de soulignement dans les polices chinoises et anglaises sous IE

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

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment taper souligné sur le clavier ? Comment taper uniquement souligner sans taper ? Comment taper souligné sur le clavier ? Comment taper uniquement souligner sans taper ? Feb 22, 2024 pm 07:46 PM

Comment taper souligné sur le clavier ? Comment taper uniquement souligner sans taper ?

Comment taper souligné dans Excel Comment taper souligné dans Excel Mar 20, 2024 am 08:37 AM

Comment taper souligné dans Excel

Pourquoi le soulignement vierge dans le document wps ne peut-il pas être imprimé ? Comment dois-je le souligner ? Pourquoi le soulignement vierge dans le document wps ne peut-il pas être imprimé ? Comment dois-je le souligner ? Mar 20, 2024 am 09:40 AM

Pourquoi le soulignement vierge dans le document wps ne peut-il pas être imprimé ? Comment dois-je le souligner ?

Comment supprimer le soulignement en CSS a Comment supprimer le soulignement en CSS a Jan 28, 2023 pm 03:07 PM

Comment supprimer le soulignement en CSS a

Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE) Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE) Feb 10, 2024 am 10:30 AM

Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE)

Internet Explorer ouvre Edge : Comment arrêter la redirection MS Edge Internet Explorer ouvre Edge : Comment arrêter la redirection MS Edge Apr 14, 2023 pm 06:13 PM

Internet Explorer ouvre Edge : Comment arrêter la redirection MS Edge

Comment annuler le saut automatique vers Edge lors de l'ouverture d'IE dans Win10_Solution vers le saut automatique de la page du navigateur IE Comment annuler le saut automatique vers Edge lors de l'ouverture d'IE dans Win10_Solution vers le saut automatique de la page du navigateur IE Mar 20, 2024 pm 09:21 PM

Comment annuler le saut automatique vers Edge lors de l'ouverture d'IE dans Win10_Solution vers le saut automatique de la page du navigateur IE

Comment souligner dans un mot ? Comment souligner un mot Comment souligner dans un mot ? Comment souligner un mot Mar 06, 2024 pm 03:00 PM

Comment souligner dans un mot ? Comment souligner un mot

See all articles