CSS 밑줄은 크롬이 너무 얇고 너무 낮습니다.-CSS 튜토리얼-php.cn

CSS 밑줄은 크롬이 너무 얇고 너무 낮습니다.

尊渡假赌尊渡假赌尊渡假赌

풀어 주다： 2025-03-16 11:16:11

원래의

552명이 탐색했습니다.

CSS의 밑줄 표시에 대한 자세한 설명 및 수리 제안 Chrome 브라우저 표시

CSS 밑줄은 크롬이 너무 얇고 너무 낮습니다.

이 기사에서는 크롬에서 새로운 CSS 속성 text-decoration-thickness 와 text-underline-offset 테스트 할 때 발생하는 두 가지 문제에 대해 논의합니다.

기본 밑줄은 일관성이 없습니다
브라우저 기본 스타일을 대체하십시오
Chrome Bug 1 : MacOS 시스템에서 밑줄이 너무 얇습니다.
크롬 버그 2 : 밑줄이 너무 낮습니다
크롬 브라우저 버그를 먼저 해결하는 방법

기본 밑줄은 일관성이 없습니다

간단한 웹 페이지에 텍스트 링크를 추가하고 글꼴을 Arial으로 설정 한 다음 다른 브라우저와 운영 체제에서 밑줄이있는 디스플레이 효과를 비교하십시오. 결과는 다른 브라우저의 기본 밑줄 두께 및 수직 위치 (기준선 오프셋)가 일치하지 않음을 보여줍니다. 이는 다음 기본 동작 (자동 값)을 지정하는 CSS 텍스트 장식 모듈의 조항을 준수합니다.

사용자 에이전트는 적절한 텍스트 장식 라인 두께를 선택합니다. [...] 사용자 에이전트는 적절한 밑줄 오프셋을 선택합니다.

브라우저 기본 스타일을 대체하십시오

두 개의 새로운 CSS 속성은 밑줄의 두께와 오프셋을 정확하게 정의 할 수 있습니다.

text-decoration-thickness
text-underline-offset

이 두 특성을 사용하면 Firefox (Gecko Engine) 및 Safari (Webkit Engine)와 같은 다른 브라우저에서도 일관된 밑줄 효과를 만들 수 있습니다.

H1 {
  텍스트 결정 : 밑줄;
  텍스트 결정 두께 : 0.04EM;
  텍스트 언더 라인 오프셋 : 0.03em;
}

로그인 후 복사

참고 : text-decoration-thickness 속성은 또한 배송기에서 선호하는 밑줄 너비를 사용하도록 지시하는 특별한 from-font 값을 가지고 있습니다 (사용 가능한 경우). 테스트 후, 다른 글꼴의 밑줄 효과는 여전히 일치하지 않습니다.

Chrome Bug 1 : MacOS 시스템에서 밑줄이 너무 얇습니다.

text-decoration-thickness 속성이 integer 비 픽셀 값으로 계산되는 글꼴 관련 길이 값으로 설정되면 Chrome은 반올림 대신 반올림됩니다. 예를 들어, 선언 된 중량이 0.06em 이고 계산이 1.92px 인 경우 Chrome은 2px 대신 1px 중량의 밑줄을 그립니다. 이 문제는 MACOS 시스템으로만 제한됩니다.

A {
  글꼴 크기 : 2EM; 계산 결과는 32px * /입니다.
  텍스트 결정-두께 : 0.06EM; / * 계산 결과는 1.92px * /입니다.
}

로그인 후 복사

스크린 샷은 Chrome (세 번째 줄)의 텍스트 장식 라인이 Safari 및 Firefox 브라우저보다 두 배나 얇다는 것을 보여줍니다.

자세한 내용은 Chromium Issue #1255280을 참조하십시오.

크롬 버그 2 : 밑줄이 너무 낮습니다

text-underline-offset 속성은 문자 기준선과 밑줄 사이의 거리를 정확하게 설정할 수 있습니다 (기준선에 대한 밑줄의 오프셋). 불행히도, Chrome 브라우저는 현재이를 올바르게 구현하지 않아 밑줄 위치가 너무 낮습니다.

H1 {
  텍스트 결정 : 밑줄;
  텍스트-디코레이션 컬러 : #f707;
 
  / * "스킵 잉크" */비활성화
  -webkit-text-decoration-skip : none;
  Text-Decoration-Skip-ink : 없음;
 
  /* 전체 침몰 선*/
  텍스트-지분 두께 : 0.175EM; /* 싱킹 라인 높이* /
  텍스트 언더 라인 오프셋 : 0; 오프셋없는 기준선* /
}