Problem bei der Unterstreichungsausrichtung in chinesischen und englischen Schriftarten unter IE-HTML-Tutorial-php.cn

Beschreiben Sie zunächst das Problem: Wie im Bild gezeigt, wird die Link-Unterstreichung unterbrochen, wenn eine Textzeile im IE sowohl Englisch als auch Chinesisch enthält, was bedeutet, dass Chinesisch und Englisch zu diesem Zeitpunkt nicht ausgerichtet sind! (FIREFOX ist von diesem Problem nicht betroffen)

Problem bei der Unterstreichungsausrichtung in chinesischen und englischen Schriftarten unter IE

Nach dem Test wird diese Situation jedoch nicht auftreten, wenn der Link standardmäßig direkt auf der Seite gesetzt ist!

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="http://i.mtime.cn/20080731114455/images/logo_main.png" 
   style="vertical-align:middle;" alt="php中文网" />
   </a> 
   <a href="">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Problem bei der Unterstreichungsausrichtung in chinesischen und englischen Schriftarten unter IE

Dann kommt wieder der Zweifel, was verursacht die Abweichung zwischen Chinesisch und Englisch? ! Was ist die Lösung? ! Nach meinen Tests habe ich zwei Situationen gefunden (natürlich kann es noch mehr verursachende Situationen geben. Sie können es selbst ausprobieren. Die benachbarten Elemente der chinesischen und englischen Objekte verfügen über die Attributeinstellung „Vertikal ausrichten“ (z. B. das vorherige kleine Bild). oder das Textfeld, wir müssen sie vertikal ausrichten: Wenn wir sie für Bilder und Textfelder (alle anderen Inline-Blockelemente) festlegen, wirkt sich dies auf die Fehlausrichtung von Chinesisch und Englisch aus.

Eine andere Situation besteht darin, dass, wenn für das übergeordnete Element (außer der Tabelle) das Attribut „Vertical-Alignment“ festgelegt ist, auch Chinesisch und Englisch der darin enthaltenen untergeordneten Elemente falsch ausgerichtet sind.

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="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> 
   <a href="">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Wie kann dieses Problem gelöst werden? !

Lassen Sie uns zunächst über die erste Lösung sprechen, die die Lösung für das Abweichungsproblem ist, das durch die vertikale Mitte benachbarter Elemente verursacht wird: Fügen Sie den chinesischen und englischen Objekten einen Zoom:1 hinzu, um dessen Haslayout auszulösen. Durch Recherche haben wir herausgefunden Sobald es ein Haslayout hat, wird es keine Abweichungen zwischen Chinesisch und Englisch geben.

Codefeld

<!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="http://i.mtime.cn/20080731114455/images/logo_main.png"   style="max-width:90%" alt="php中文网" /></a> 
   <a href="" style="zoom:1;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Der zweite Fall ist die Vertikale des übergeordneten Elements Element Die Lösung für das durch -middle verursachte Fehlausrichtungsproblem: Fügen Sie den Satz Vertical-align:baseline zu den chinesischen und englischen Objekten hinzu, um es zu lösen!

Codefeld

<!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="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> 
   <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Aber wir können sehen, dass die Unterstreichung zu eng zu sein scheint , zu diesem Zeitpunkt müssen wir noch zoom:1; hinzufügen, um sein hasLayout auszulösen, um zu vermeiden, dass es zu eng wird!

Codefeld

<!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="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> 
   <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

Wenn Sie auf andere Situationen stoßen, in denen Chinesisch und Englisch nicht richtig ausgerichtet sind, dann Sie können auch versuchen, die beiden oben genannten Methoden zur Lösung zu verwenden. Am sichersten und effektivsten ist es natürlich, die Song-Schriftart sowohl auf Chinesisch als auch auf Englisch zu verwenden.

Das obige ist der detaillierte Inhalt vonProblem bei der Unterstreichungsausrichtung in chinesischen und englischen Schriftarten unter IE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Problem bei der Unterstreichungsausrichtung in chinesischen und englischen Schriftarten unter IE

In Verbindung stehende Artikel