Chrome의 CSS Underline 문제에 대한 최근 기사는 text-decoration-thickness
와 text-underline-offset
, 강력하고 널리 지원되는 CSS 속성을 강조했습니다.
text-decoration-thickness
설명합시다. 우분투의 기본 밑줄은 상당히 두껍습니다. 우리는 그것을 개선 할 수 있습니다 :
: 모든 링크 { 텍스트 결정 두께 : 0.08EM; }
참고 : 사용합니다 :any-link
<a></a>
실제 하이퍼 링크 만 타겟팅합니다 ( href
속성이있는 사람). 브라우저의 사용자 에이전트 스타일 시트도 선호합니다 :any-link
Google 검색 및 Wikipedia와 같은 많은 사이트는 호버를 고용합니다. 텍스트 내 링크에는 일반적으로 접지 할 수 없지만이 접근법은 간격을 둔 링크 (탐색, 바닥 글)에 적합합니다. 헤더 예는 다음과 같습니다.
헤더 : 모든 링크 { 텍스트 결정 : 없음; } 헤더 : 모든 링크 : 호버 { 텍스트 결정 : 밑줄; }
그러나 호버 밑줄은 기본 두께로 되돌아갑니다. 초기 text-decoration-thickness
설정을 무시합니다. 왜?
이 문제는 text-decoration
속성 속성이며, text-decoration-thickness
외면과 비교할 때 비롯됩니다. text-decoration
none
underline
설정하면 다른 텍스트 장식 구성 요소 (두께, 스타일, 색상). CSS 텍스트 장식 모듈은 다음을 지정합니다. 생략 된 값은 초기 상태로 되돌립니다.
브라우저 DevTools는 다음과 같이 확인하십시오. 하이퍼 링크를 검사하고 text-decoration
속성을 확장하여 구성 요소 값을 확인하십시오.
호버에 맞춤 두께를 유지하려면 조정이 필요합니다. 몇 가지 솔루션이 있습니다.
:hover
상태에서 text-decoration-thickness
다시 설명합니다.text-decoration
속도에 직접 통합하십시오.text-decoration-line
대신 text-decoration
라인을 사용하십시오.text-decoration
전략 :hover
스테이트 워크에서 text-decoration-thickness
반복하는 것만으로도 중복됩니다.
/ * 옵션 A */ 헤더 : 모든 링크 { 텍스트 결정 : 없음; } 헤더 : 모든 링크 : 호버 { 텍스트 결정 : 밑줄; 텍스트 결정 두께 : 0.08EM; }
이상적으로는 text-decoration
의 속기 기능을 활용합니다.
/ * 옵션 B */ 헤더 : 모든 링크 { 텍스트 결정 : 없음; } 헤더 : 모든 링크 : 호버 { 텍스트 결정 : 밑줄 0.08EM; }
참고 :이 속기 접근법은 비교적 새롭습니다. 이전 CSS 버전에는이 기능이 부족했습니다. Safari의 WebKit 엔진은 여전히 접두사 -webkit-text-decoration
사용하며 두께지지가 부족합니다 (WebKit Bug 230083 참조). 이것은 옵션 B Safari-Incsatible을 렌더링합니다.
최선의 접근 방식은 속기와 함께 소개 된 text-decoration-line
사용합니다.
/ * 옵션 C */ 헤더 : 모든 링크 { 텍스트-결정 라인 : 없음; } 헤더 : 모든 링크 : 호버 { 텍스트-장식 라인 : 밑줄; }
이것은 이전에 설정된 두께를 보존하는 line
구성 요소 만 수정합니다. 이것은 가장 강력하고 크로스 브라우저 호환 솔루션입니다.
기억하십시오 : 속성 속성 ( text-decoration
, background
같은)은 기본값에 값을 생략했습니다. 이것은 background-repeat: no-repeat
와 같은 스타일이 후속 background: url(flower.jpg)
선언. 자세한 내용은 "우발적 인 CSS 재설정"을 참조하십시오.
위 내용은 텍스트 결정 속성을 피할 때의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!