링크 텍스트를 숨기려면 텍스트 들여 쓰기

필자는 text-indent : -9999px css-trick 대신 링크 텍스트를 숨기고 이미지를 홈 로고 버튼에 대한 링크로 표시하는 방법을 찾고있었습니다. Ive는 작동하는 것처럼 보이는 간단한 솔루션을 찾았지만, 과장된 부분이 없어 보이지 않는 구멍이 있는지 궁금합니다. 아래는 솔루션입니다. class = "homeButton"은 CSS 롤오버 이미지를 적용하고 class는 "hide"링크 텍스트를 숨기는 것입니다. 이것이 어떤 단점이 있다면 알려주시겠습니까? 텍스트는 여전히 화면에 나타나지 않지만 화면 판독기와 검색 엔진에는 여전히 표시되는 텍스트 기반 링크를 유지하는 방법으로는 보이지 않습니다. 항상 고맙습니다 ... 당신은 생각이 디스플레이를 사용하는 경우 정확히 어떻게 당신에게 .hide 자신의 컨텐츠를하지만 말을하지 않습니다링크 텍스트를 숨기려면 텍스트 들여 쓰기

<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>

출처

2013-04-22 John

: 없음을 잊어 버려. display-none이있는 요소는 화면 판독기 과 검색 스파이더에 의해 무시됩니다. 숨겨진 내용은 관련성이없는 것으로 간주되기 때문에 (적어도 검은 모자 SEO-ers는 숨겨진 텍스트를 키워드로 쉽게 채울 수 있습니다).

텍스트 들여 쓰기 솔루션에 어떤 문제가 있는지 실제로 알 수 없습니다. 필자는 거대한 사용하지 않은 캔버스에 대해 IE6가 메모리를 예약하지 못하도록 들여 쓰기 값을 줄이지 만 여전히 이러한 노력에 권장되는 기술입니다.

출처

2013-04-22 22:13:37

@ 지미 ... 예, 표시 : 없음; 고맙습니다, 나는 진실하기가 너무 쉽다는 것을 알았습니다. 텍스트 들여 쓰기가 현재 진행되고 있음을 이해합니다. 더 나은 방법이 있어야하는 것처럼 보입니다. – John

HTML 코드

<h1><a class="homeButton" href="index.html">Home Button</a></h1>

CSS 코드

h1 { 
    display: block; 
    width: 386px; 
    height: 83px; 
    margin: 11px 0 0 10px; 
    text-align: left; 
    overflow-x: hidden; 
} 

h1 a.homeButton { 
    display: block; 
    width: 386px; 
    height: 83px; 
    text-indent: -19999px; 
    background-repeat: no-repeat; 
    background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png"); 
}

DEMO

http://jsfiddle.net/bartekbielawa/rmWhF/

설명

<h1> 원하는대로 변경할 수 있습니다. 나는 서재응을 위해 을 선호하기 때문에

출처

2013-04-22 23:03:20

링크 텍스트를 숨기려면 텍스트 들여 쓰기

답변

관련 문제