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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Verwandte Etiketten：

ie 下划线

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung ungewöhnlicher Tags in HTML Nächster Artikel：Lernen Sie in 9 Tagen den Austausch von HTML+CSS+Bootstrap-Videoinformationen

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors