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

집

웹 프론트엔드

HTML 튜토리얼

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

巴扎黑

Aug 21, 2017 pm 12:01 PM

ie 밑줄

먼저 문제 설명: 그림과 같이 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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"  
   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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"     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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

로그인 후 복사

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

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1675

Cakephp 튜토리얼

1429

라라벨 튜토리얼

1333

PHP 튜토리얼

1278

C# 튜토리얼

1257

Related knowledge

키보드에서 밑줄을 입력하는 방법은 무엇입니까? 입력하지 않고 밑줄만 입력하는 방법은 무엇입니까? Feb 22, 2024 pm 07:46 PM

입력 방법을 영어로 조정하고 Shift 키와 빼기 키를 길게 누릅니다. 튜토리얼 적용 모델 : Lenovo AIO520C 시스템 : Windows 10 Professional Edition : Microsoft Office Word 2022 분석 1 먼저 입력 방식의 중국어, 영어 타이핑을 확인하고 영어로 조정합니다. 2 그런 다음 키보드의 Shift 키와 빼기 키를 동시에 누르십시오. 3 밑줄 친 단어를 보려면 인터페이스를 확인하세요. 보충: 워드 문서에서 밑줄을 빠르게 입력하는 방법 1. 워드에서 밑줄을 입력해야 하는 경우 마우스로 공백을 선택한 후 글꼴 메뉴에서 밑줄 종류를 선택하여 입력합니다. 요약/주의사항: 계속하기 전에 입력 방법을 영어로 변경하십시오. 그렇지 않으면 밑줄을 성공적으로 입력할 수 없습니다.

wps 문서에서 공백 밑줄이 인쇄되지 않는 이유는 무엇입니까? 밑줄을 어떻게 긋나요? Mar 20, 2024 am 09:40 AM

Word에서 텍스트를 입력할 때 설명하거나 강조하기 위해 일부 위치에 밑줄을 쳐야 하는 경우가 있습니다. 그런데 왜 WPS 문서의 빈 밑줄이 인쇄되지 않습니까? 밑줄은 어떻게 쳐야 할까요? 아래에서 에디터가 자세히 소개해드리겠습니다. WPS 문서에서는 그림과 같이 공백에 밑줄을 긋을 수 있습니다. 어떻게 하나요? 자세한 작업은 아래를 읽어주세요. 빈 공간에 밑줄을 긋는 방법을 보여주기 위해 그림의 문서를 예로 들어 보겠습니다. 그림에서 "이름"의 콜론 오른쪽에 커서를 놓고 키보드의 스페이스바를 눌러 설명을 쉽게 하기 위해 아래와 같이 글꼴 크기를 늘렸습니다. 2. 그런 다음, 다음을 수행합니다. 커서가 설정된 위치에 도달하면 놓지 않고 길게 클릭한 후 그림과 같이 콜론 왼쪽으로 드래그하여 이동합니다. 3. 그런 다음 그림에서 화살표로 표시된 "밑줄" 아이콘을 클릭합니다. 사진.

엑셀에서 밑줄을 입력하는 방법 Mar 20, 2024 am 08:37 AM

사회가 발전함에 따라 기술도 급속히 발전하여 오늘날의 사무실에는 전자 장비가 표준 구성이 되었습니다. 오늘날에도 다양한 유형의 사무용 소프트웨어가 있으며, 사무용 소프트웨어에서는 여전히 일반적으로 사용되는 작업이 테이블로 설정되어 있습니다. 이러한 내용을 강조하기 위해 다른 색상의 글꼴을 선택하거나 글꼴을 심화하고 때로는 강조하기 위해 밑줄을 긋습니다. 글꼴 설정은 쉽지만 밑줄을 추가하는 방법은 모두가 알지 못합니다. 엑셀에서 밑줄 긋는 방법. 1. 엑셀을 열고 아래 그림과 같이 몇 단어를 입력하세요. 2. 아래 그림과 같이 텍스트를 선택하고 마우스 오른쪽 버튼을 클릭한 후 "셀 서식" 옵션을 선택합니다. 3. "단일 밑줄"을 찾아

CSS에서 밑줄을 제거하는 방법 Jan 28, 2023 pm 03:07 PM

CSS a에서 밑줄을 취소하는 방법: 1. HTML 샘플 파일을 만듭니다. 2. 본문에 a 태그를 추가합니다. 3. 지정된 a에 "#none{text-꾸밈: none;}"을 추가하여 밑줄을 취소합니다. 꼬리표.

Internet Explorer에서 Edge 열기: MS Edge 리디렉션을 중지하는 방법 Apr 14, 2023 pm 06:13 PM

Internet Explorer가 오랫동안 인기를 끌지 못했다는 것은 비밀이 아니지만 Windows 11이 출시되면서 현실이 시작되었습니다. 나중에 IE를 대체하는 경우도 있지만 이제 Edge는 Microsoft 최신 운영 체제의 기본 브라우저입니다. 현재로서는 Windows 11에서 Internet Explorer를 계속 활성화할 수 있습니다. 그러나 IE11(최신 버전)은 이미 공식적인 종료 날짜인 2022년 6월 15일을 갖고 있으며 시계는 계속 흐르고 있습니다. 이를 염두에 두고 Internet Explorer가 때때로 Edge를 여는 것을 발견했을 수 있으며 마음에 들지 않을 수도 있습니다. 그럼 왜 이런 일이 일어나는 걸까요? 존재하다

win11에서 ie11 브라우저를 사용할 수 없으면 어떻게 해야 합니까? (win11은 IE 브라우저를 사용할 수 없습니다) Feb 10, 2024 am 10:30 AM

점점 더 많은 사용자들이 win11 시스템을 업그레이드하기 시작하고 있습니다. 사용자마다 사용 습관이 다르기 때문에 여전히 많은 사용자들이 ie11 브라우저를 사용하고 있습니다. 그렇다면 win11 시스템에서 ie 브라우저를 사용할 수 없으면 어떻게 해야 합니까? windows11은 여전히 ie11을 지원하나요? 해결책을 살펴보겠습니다. win11에서 ie11 브라우저를 사용할 수 없는 문제 해결 방법 1. 먼저 시작 메뉴를 마우스 오른쪽 버튼으로 클릭한 후 "명령 프롬프트(관리자)"를 선택하여 엽니다. 2. 연 후 "Netshwinsockreset"을 직접 입력하고 Enter를 눌러 확인합니다. 3. 확인 후 "netshadvfirewallreset&rdqu"를 입력하세요.

시대의 끝: Internet Explorer 11이 만료되었습니다. 알아야 할 사항은 다음과 같습니다. Apr 20, 2023 pm 06:52 PM

2022년 6월 15일은 Microsoft가 IE11(Internet Explorer 11)에 대한 지원을 종료하고 레거시 브라우저 장을 마감하는 날입니다. 회사는 한동안 사용자에게 이 수명 종료 날짜를 상기시키고 Microsoft Edge로의 전환을 계획할 것을 촉구해 왔습니다. Microsoft는 Windows용 최신 기본 웹 브라우저로 IE11을 Windows 8.1에 번들로 제공합니다. 비록 (현재의) Chrome 수준에는 도달하지 못했지만 2014년에는 IE8에 이어 두 번째로 많이 사용된 데스크톱 브라우저였습니다. 물론 20으로

Win10에서 IE를 열 때 Edge로 자동 점프를 취소하는 방법_IE 브라우저 페이지 자동 점프에 대한 솔루션 Mar 20, 2024 pm 09:21 PM

최근 많은 win10 사용자는 컴퓨터 브라우저를 사용할 때 IE 브라우저가 항상 자동으로 엣지 브라우저로 이동한다는 사실을 발견했습니다. 그러면 win10에서 IE를 열 때 자동 엣지 브라우저로 이동을 끄는 방법은 무엇입니까? 이 사이트에서는 win10에서 IE를 열 때 자동으로 가장자리로 이동하고 닫는 방법을 사용자에게 주의 깊게 소개합니다. 1. 엣지 브라우저에 로그인하고 오른쪽 상단에서...를 클릭하고 드롭다운 설정 옵션을 찾습니다. 2. 설정을 입력한 후 왼쪽 열에서 기본 브라우저를 클릭합니다. 3. 마지막으로 호환성에서 웹사이트가 IE 모드에서 다시 로드되는 것을 허용하지 않는 확인란을 선택하고 IE 브라우저를 다시 시작합니다.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제