이는 눈에 잘 띄지 않는 문제이지만 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 ">
<머리>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>테스트</title>
<스타일 유형="텍스트/css">
* { 여백:0;
HTML { 배경:#fff }
body { 위치: 상대; 글꼴: 12px/1.6em Verdana, Lucida, Arial, Helvetica, 송 왕조, sans-serif };
</style>
</head>
<본문>
<div 스타일="수직 정렬:중간;">
<a href="">왜 항상 정렬이 잘못되어 있나요? 왜??</a>
</div>
</body>
</html>
이 문제를 해결하는 방법은 무엇입니까? !
첫 번째에 대해 먼저 이야기해 보겠습니다. 이는 인접 요소의 수직 중앙으로 인해 발생하는 정렬 문제에 대한 솔루션입니다.
중국어 및 영어 개체에 확대/축소: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 ">
<머리>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>테스트</title>
<스타일 유형="텍스트/css">
* { 여백:0;
HTML { 배경:#fff }
body { 위치: 상대; 글꼴: 12px/1.6em Verdana, Lucida, Arial, Helvetica, 송 왕조, sans-serif };
</style>
</head>
<본문>
<div>
<a href="" style="zoom:1;">왜 항상 잘못 정렬되어 있나요? 왜??</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 ">
<머리>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>테스트</title>
<스타일 유형="텍스트/css">
* { 여백:0;
HTML { 배경:#fff }
body { 위치: 상대; 글꼴: 12px/1.6em Verdana, Lucida, Arial, Helvetica, 송 왕조, sans-serif };
</style>
</head>
<본문>
<div 스타일="수직 정렬:중간;">
<a href="" style="vertical-align:baseline;">왜 항상 잘못 정렬되어 있나요? 왜??</a>
</div>
</body>
</html>
하지만 이때 밑줄이 너무 빡빡해 보이지 않도록 하려면 hasLayout을 트리거하기 위해 여전히 Zoom:1을 추가해야 합니다. .
<a href="" style="zoom:1;"vertical-align:baseline;">나는 왜 항상 틀리나요? 왜??</a>
중국어와 영어가 어긋나는 상황을 접하게 된다면, 이 경우, 위의 두 가지 방법을 사용하여 문제를 해결할 수도 있습니다. 물론 가장 안전하고 효과적인 방법은 중국어와 영어로 송나라를 사용하는 것입니다.