IE での中国語および英語フォントの下線の配置に関する問題-htmlチュートリアル-php.cn

まず問題について説明します。図に示すように、IE でテキスト行に英語と中国語の両方が含まれる場合、リンクの下線が切れます。これは、現時点では中国語と英語が揃っていないことを意味します。 (FIREFOX はこの問題の影響を受けません)

IE での中国語および英語フォントの下線の配置に関する問題

しかし、テストの結果、デフォルトでリンクがページに直接設定されている場合には、この状況は発生しません。

コード

<!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="//m.sbmmt.com" 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>

ログイン後にコピー

IE での中国語および英語フォントの下線の配置に関する問題

そこでまた疑問が生じますが、中国語と英語の乖離の原因は何でしょうか？！解決策は何でしょうか？！したがって、テストの結果、2 つの状況が見つかりました (もちろん、原因となる状況は他にもある可能性があります。自分で試してみてください)。中国語と英語のオブジェクトの隣接する要素には、vertical-align 属性が設定されています (前の小さな図など)。一般に、画像やテキストボックス (その他のインラインブロック要素) に対して垂直方向に整列する必要があります。これは、中国語と英語の位置ずれに影響します。

もう一つの状況は、親要素（テーブルを除く）にvertical-align属性が設定されている場合、その中の子要素の中国語と英語もずれるということです。

コード

<!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="//m.sbmmt.com" 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>

ログイン後にコピー

この問題をどうやって解決しますか？！

まずは 1 つ目について説明します。これは、隣接する要素の垂直方向の中央によって引き起こされる位置ずれの問題の解決策です。中国語と英語のオブジェクトにzoom:1 を追加して、その haslayout をトリガーします。調査により、次のことが判明しました。 haslayout を作成すると、中国語と英語のオブジェクトが整列しなくなります。

コードボックス

<!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="//m.sbmmt.com" 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>

ログイン後にコピー

2番目のケースは、親要素のvertical-middleによって引き起こされる不整列のずれの問題の解決策です: 文vertical-align:baselineを中国語に追加します。英語のオブジェクトも解決できます！

コードボックス

<!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="//m.sbmmt.com" 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>

ログイン後にコピー

しかし、この時点では、下線を回避するには、hasLayout をトリガーするためにまだzoom:1; を追加する必要があることがわかります。ぴったりフィット！

コードボックス

<!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="//m.sbmmt.com" 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>

ログイン後にコピー

中国語と英語が一致しない他の状況に遭遇した場合は、上記の2つの方法を使用して解決することもできます。もちろん、最も安全で効果的なのは、中国語と英語の両方で Song フォントを使用することです。

以上がIE での中国語および英語フォントの下線の配置に関する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。