2011-02-05 4 views
1

(FF로 작동) CSS를 사용하여 방문한 링크의 밑줄을 제거하려면 어떻게해야합니까? 나는 시도했다 :CSS에서 크롬의 링크 밑줄을 제거하려면 어떻게해야합니까?

a:visited { 
    color: rgb(255, 255, 255); 
    text-decoration: none !important; 
} 

일부 브라우저 공급 업체로 결정했습니다
a:visited { 
    color: rgb(255, 255, 255); 
    text-decoration: none; 
} 
+1

hat에서'text-decoration' 대신'border-bottom'을 설정 했습니까? – BoltClock

+1

예제를 통해 사이트를 보여줄 수 있습니까? 귀하의 질문에있는 예제가 Chrome에서 작동하도록 기대했을 것입니다 ... –

+1

@Kris C http://phihag.de/2011/so/visited.html – phihag

답변

6

당신이 적용 할 수있는 유일한 CSS 속성 : 방문한 링크 대부분의 웹킷 기반 브라우저에서 (예 : Chrome)은 color입니다. 이는 history stealing을 방지하기위한 것입니다. 또한 자바 스크립트에서 링크의 CSS 속성 인 color의 값을 결정할 수 없습니다. 자세한 내용은 https://bugs.webkit.org/show_bug.cgi?id=24300을 참조하십시오.

그러나 모든 링크의 스타일을 a{text-decoration: none;}으로 변경할 수 있습니다. Here's a demo of the whole affair.

+0

왜 '! important'가 필요한가요? 나는 방금'a {text-decoration : none;}을 사용했던 사이트에서 Chrome의 밑줄을 보지 않습니다. }' – jeroen

+0

@jeroen 일반적으로 규칙의 특이성이 내장 기본 스타일 시트의 텍스트 장식 규칙보다 큰 경우에는 중요하지 않습니다. color 속성의 경우 많은 브라우저가보다 구체적인 a : link 또는 a : visited 요소에서이를 선언하는 데 사용되었습니다. 텍스트 꾸미기에 중요한 브라우저를 찾을 수 없기 때문에 답변에서 삭제했습니다. – phihag

+0

아, 그걸 알지 못했습니다, 고마워요! – jeroen

4

는/별도 스타일링 a:visited 하이퍼 링크는 사용자에게 보안/개인 정보 보호 위협이 있음을 깨달았다. 따라서 일부는 전부는 아니지만 a:visited의 스타일을 다르게 지정할 수있는 기능을 제거했습니다.

나는 이것이 Chrome에 해당한다고 생각합니다.

참고 :

3

귀하의정의는 전에 일반용 a {} 정의 앞에 와야합니다. a : visited를 사용하여 색상을 설정할 수 있지만 텍스트 장식을 설정하는 것은 효과가 없지만 나중에 요소에 대한 일반 텍스트 장식을 설정하면 가능합니다.

그래서 :

a:visited {color: yellow;} 
a {color:yellow; text-decoration: none; } 

작동하지 않습니다 (텍스트가없는 장식 적 노란색에있는 모든 링크를 제공합니다)하지만,

a {color:yellow; text-decoration: none; } 
a:visited {color: yellow;} 

a {color:yellow; text-decoration: none; } 
a:visited {color: yellow; text-decoration: none;} 

(모두 모두 제공 링크가 노란색이지만 밑줄이 있음)

+0

이것은 황금색입니다. 또한 그런 종류의 스타일링은 적어도 자바 스크립트에서는 JavaScript를 사용하여 다시 작성할 수 없습니다.이런 종류의 스타일 시트를 다시로드하려고하면 다시 스타일을 다시 얻게됩니다. – Julik

관련 문제