CSS를 사용하는 모든 브라우저에서 밑줄의 크기를 동일하게 만드는 방법은 무엇입니까?

CSS에서 다음과 같은 내용을 사용하면 IE 및 Firefox의 링크 아래에있는 밑줄이 두 배로됩니다. 일부 웹 사이트는 동일한 글꼴 모음, 동일한 글꼴 크기, 굵게 표시되며 밑줄은 두 배로 표시되지 않습니다. 밑줄은 한 줄만 만들 수 있고 두 줄이 아니어도됩니다 (1px vs 2px). 가능한 경우 모든 브라우저에서 작동 할 간단한 CSS입니다. 나는 문제를 해결하기 위해 국경 바닥을 사용할 수 있다는 것을 알고 있지만 나는 그 아이디어를 정말로 좋아하지 않는다. CSS를 사용하는 모든 브라우저에서 밑줄의 크기를 동일하게 만드는 방법은 무엇입니까?

.a_12 { 
font-family: arial; 
font-size: 12pt; 
font-weight: bold; 
text-decoration: underline; 
}

는 당신의 도움을 주셔서 감사 브라우저가 텍스트 CSS를 사용하여 강조 렌더링하는 방법을 제안

출처

2011-10-14 user977191

당신은 제어 할 수 없습니다. 당신이 정말로 그 수준의 제어가 필요하다면, 아래쪽 경계선을 사용하는 것이 좋습니다. border-bottom 기술에 대한 대안은 여러 가지 다른 게시물에 제안

출처

2011-10-14 16:06:57 BoltClock

도 브라우저마다 다를 수 있지만 '밑줄'보다 낫습니다. – jackJoe

요소에 여백이 있으면 경계선 "밑줄"이 오작동합니다. – acm

도움을 주셔서 감사합니다! – user977191

이 속성을 사용하려고

box-shadow: 0 -1px 0 0 inset;

밖으로 떠나 color 매개 변수의 기본값은 텍스트 색입니다.

출처

2011-10-14 16:09:55 pleerock

도와 주셔서 감사합니다. – user977191

과 같이, insetbox-shadow를 사용하는 border-width: 1px 또는 border-bottom 속성 재생됩니다 :

출처

2013-08-14 13:03:34 savehansson

CSS를 사용하는 모든 브라우저에서 밑줄의 크기를 동일하게 만드는 방법은 무엇입니까?

답변

관련 문제