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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

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

Ajustez la méthode de saisie sur l'anglais et maintenez la touche Maj et la touche moins enfoncées. Modèle applicable du didacticiel : Lenovo AIO520C Système : Windows 10 Édition Professionnelle : Microsoft Office Word 2022 Analyse 1 Vérifiez d'abord la saisie en chinois et en anglais de la méthode de saisie et ajustez-la en anglais. 2Maintenez ensuite enfoncées simultanément la touche Maj et la touche Moins de votre clavier. 3 Vérifiez l'interface pour voir les mots soulignés. Supplément : Comment saisir rapidement un soulignement dans un document Word 1. Si vous devez saisir un soulignement dans Word, sélectionnez l'espace avec la souris, puis sélectionnez le type de soulignement dans le menu de police pour saisir. Résumé/Remarques : assurez-vous de modifier la méthode de saisie en anglais avant de continuer, sinon le trait de soulignement ne pourra pas être saisi avec succès.

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

Lors de la saisie de texte dans Word, certaines positions doivent parfois être soulignées pour expliquer ou souligner. Alors pourquoi le soulignement vide dans le document WPS ne peut-il pas être imprimé ? Comment dois-je souligner ? L’éditeur vous le présentera en détail ci-dessous, jetons un coup d’œil. Dans les documents WPS, vous pouvez souligner les espaces vides, comme le montre la figure. Comment faire? Veuillez lire ci-dessous pour les opérations détaillées. Prenez le document dans l'image comme exemple pour montrer comment souligner l'espace vide. Placez le curseur à droite des deux points de "Nom" dans l'image, et appuyez sur la barre d'espace du clavier. Afin de faciliter la démonstration, j'ai augmenté la taille de la police, comme indiqué ci-dessous : 2. Puis, après. le curseur atteint la position définie, cliquez et maintenez sans lâcher prise, et déplacez-vous vers la gauche sur le côté des deux points, comme indiqué dans l'image : 3. Cliquez ensuite sur l'icône "souligné", comme indiqué par la flèche dans l'image.

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

Avec les progrès de la société, la technologie s'est également développée rapidement et les équipements électroniques sont devenus une configuration standard dans les bureaux d'aujourd'hui. Il existe aujourd'hui différents types de logiciels de bureau. Excel est encore une opération couramment utilisée dans les logiciels de bureau. Nous définissons parfois les paramètres dans les tableaux. .Données, afin de mettre en évidence ces contenus, nous choisirons des polices de couleurs différentes ou approfondirons la police, et parfois la soulignerons pour la mettre en valeur. La police est facile à définir, mais tout le monde ne sait pas comment ajouter un soulignement. amis novices, comment souligner dans Excel. 1. Ouvrez Excel et tapez quelques mots, comme indiqué dans l'image ci-dessous. 2. Sélectionnez le texte, cliquez avec le bouton droit et sélectionnez l'option "Formater les cellules", comme indiqué dans la figure ci-dessous. 3. Recherchez « soulignement unique » et

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

Comment annuler le soulignement en CSS a : 1. Créez un exemple de fichier HTML ; 2. Ajoutez la balise a au corps ; 3. Annulez le soulignement en ajoutant "#none{text-decoration: none;}" au a spécifié. étiqueter.

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

Ce n’est un secret pour personne, Internet Explorer est tombé en disgrâce depuis longtemps, mais avec l’arrivée de Windows 11, la réalité s’installe. Plutôt que de remplacer parfois IE à l'avenir, Edge est désormais le navigateur par défaut du dernier système d'exploitation de Microsoft. Pour l'instant, vous pouvez toujours activer Internet Explorer dans Windows 11. Cependant, IE11 (la dernière version) a déjà une date officielle de mise à la retraite, qui est le 15 juin 2022, et le temps presse. Dans cet esprit, vous avez peut-être remarqué qu'Internet Explorer ouvre parfois Edge, et cela ne vous plaira peut-être pas. Alors pourquoi cela se produit-il ? exister

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

De plus en plus d'utilisateurs commencent à mettre à niveau le système Win11. Étant donné que chaque utilisateur a des habitudes d'utilisation différentes, de nombreux utilisateurs utilisent toujours le navigateur ie11. Alors, que dois-je faire si le système Win11 ne peut pas utiliser le navigateur ie ? Windows11 prend-il toujours en charge ie11 ? Jetons un coup d'œil à la solution. Solution au problème selon lequel Win11 ne peut pas utiliser le navigateur ie11 1. Tout d'abord, cliquez avec le bouton droit sur le menu Démarrer et sélectionnez « Invite de commandes (administrateur) » pour l'ouvrir. 2. Après ouverture, entrez directement « Netshwinsockreset » et appuyez sur Entrée pour confirmer. 3. Après confirmation, entrez « netshadvfirewallreset&rdqu ».

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

Récemment, de nombreux utilisateurs de Win10 ont constaté que leur navigateur IE passe toujours automatiquement au navigateur Edge lorsqu'ils utilisent des navigateurs informatiques. Alors, comment désactiver le saut automatique vers Edge lors de l'ouverture d'IE dans Win10 ? Laissez ce site présenter soigneusement aux utilisateurs comment passer automatiquement au bord et se fermer lors de l'ouverture d'IE dans Win10. 1. Nous nous connectons au navigateur Edge, cliquons sur... dans le coin supérieur droit et recherchons l'option de paramètres déroulante. 2. Après avoir entré les paramètres, cliquez sur Navigateur par défaut dans la colonne de gauche. 3. Enfin, dans la compatibilité, on coche la case pour ne pas autoriser le rechargement du site web en mode IE et on redémarre le navigateur IE.

Comment résoudre le problème selon lequel le raccourci IE ne peut pas être supprimé Comment résoudre le problème selon lequel le raccourci IE ne peut pas être supprimé Jan 29, 2024 pm 04:48 PM

Solutions aux raccourcis IE qui ne peuvent pas être supprimés : 1. Problèmes d'autorisation ; 2. Dommages aux raccourcis ; 3. Conflits logiciels ; 4. Problèmes de registre 6. Problèmes de système ; 7. Réinstaller IE ; outils ; 9. Vérifiez le chemin cible du raccourci ; 10. Tenez compte d’autres facteurs ; 11. Consultez des professionnels. Introduction détaillée : 1. Problème d'autorisation, cliquez avec le bouton droit sur le raccourci, sélectionnez "Propriétés", dans l'onglet "Sécurité", assurez-vous que vous disposez des autorisations suffisantes pour supprimer le raccourci. Sinon, vous pouvez essayer de l'exécuter en tant qu'administrateur, etc. .

See all articles