IE에서 중국어 및 영어 글꼴의 밑줄 정렬 문제-HTML 튜토리얼-php.cn

먼저 문제 설명: 그림과 같이 IE에서 텍스트 줄에 영어와 중국어가 모두 포함되어 있으면 링크 밑줄이 깨집니다. 이는 현재 중국어와 영어가 정렬되지 않음을 의미합니다! (FIREFOX는 이 문제에 영향을 받지 않습니다.)

IE에서 중국어 및 영어 글꼴의 밑줄 정렬 문제

하지만 테스트 결과 기본적으로 페이지에 링크가 직접 설정되어 있으면 이런 상황이 발생하지 않습니다!

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>

IE에서 중국어 및 영어 글꼴의 밑줄 정렬 문제

그래서 또 의문이 생기는데, 중국어와 영어의 차이가 발생하는 원인은 무엇일까요? ! 해결책은 무엇입니까? ! 그래서 테스트 후 두 가지 상황을 발견했습니다(물론 더 많은 원인이 있는 상황이 있을 수 있습니다. 직접 시도해 볼 수 있습니다. 중국어 및 영어 개체의 인접한 요소에는 수직 정렬 속성 설정이 있습니다(이전의 작은 그림, 또는 텍스트 상자를 수직으로 정렬해야 합니다. 일반적으로 그림 및 텍스트 상자(기타 인라인 블록 요소)에 대해 수직 정렬:중간;을 설정하면 중국어와 영어의 정렬 불량에 영향을 미칩니다.

　 또 다른 상황은 상위 요소(테이블 제외)에 수직 정렬 속성이 설정된 경우 내부 하위 요소의 중국어와 영어도 잘못 정렬되는 경우입니다.

　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>

　 이 문제를 해결하는 방법은 무엇인가요? !

인접한 요소의 수직 중앙으로 인해 발생하는 오정렬 문제에 대한 해결책인 첫 번째에 대해 먼저 이야기해 보겠습니다. 중국어 및 영어 개체에 확대/축소:1을 추가하여 해시 레이아웃을 트리거하는 것으로 나타났습니다. 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="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>

두 번째 경우는 상위 요소의 수직 중앙으로 인해 발생하는 정렬되지 않은 편차 문제에 대한 솔루션입니다. 중국어에 수직 정렬: 기준선 문장을 추가합니다. 그리고 영어 객체는 해결될 수 있습니다!

　 코드 상자

<!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>

하지만 이때 밑줄이 너무 촘촘해 보이는 것을 볼 수 있습니다. 이를 방지하려면 hasLayout을 트리거하기 위해 여전히 Zoom:1을 추가해야 합니다. 꼭 맞는다!

　　Code box

<!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>

　그 외 중국어와 영어가 일치하지 않는 상황이 발생하면 위의 두 가지 방법을 사용하여 해결할 수도 있습니다. 물론, 가장 안전하고 효과적인 것은 중국어와 영어 모두에서 Song 글꼴을 사용하는 것입니다.

위 내용은 IE에서 중국어 및 영어 글꼴의 밑줄 정렬 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!