디스플레이 사용 : 내부 요소 중 하나에 대한 블록 <a></a>?

Question

<a></a> 안에 어떤 종류의 HTML 요소를 넣을 수 있습니까?
는 내가

<a href="#" title="Click the icon"> 
    <div style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9000;"> 
     <h3> 
      Lorem ipsum 
     </h3> 
    </div> 
</a> 

또는

<ul> 
    <a href="#" title="Click the icon"> 
     <li style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;"> 
      <h3> 
       Lorem ipsum 
      </h3> 
     </li> 
    </a> 
</ul> 

다음 만들기 위해 사랑하지만 내가 생각하는 것만 허용되지 않습니다. 같은 말을하는 w3 validator.

어쩌면이 해결책이 될 수 있습니다

<a href="#" title="Click the icon"> 
    <span style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;"> 
     Lorem ipsum 
    </span> 
</a> 

하지만이 경우

- 내가 생각하는 - 차단하는 <span> 요소를 변환하는 것은 유효하지 않습니다와 브라우저 이상 차이가 발생할 수 있습니다.

몇 가지 경험이 있으십니까?

Answer 1

h3 텍스트를 이미지 링크로 만들기 위해 이미지 대체를 사용하려는 것 같습니다. 맞습니까? http://jsfiddle.net/QKtWq/2/

HTML에서보세요 :

<h3> 
    <a href="#" title="Click me!">Lorem ipsum</a> 
</h3> 

CSS : 당신이 100 %가되고 싶지 않은 경우 당신은 또한 H3에 특정 폭을 설정할 수

h3 { 
    background: black url('http://jsfiddle.net/img/logo.png') no-repeat; 
    text-indent: -9000px; 
    height:100px; /* usually set to the height of the image */ 
} 
h3 a { 
    display:block; 
    height:100%; 
} 

.

편집 : 삭제 표시 : h3 css에서 차단. 머리글은 이미 블록 요소입니다.

Answer 2

4.01 사양은 기본적으로 앵커 요소 (또는 모든 인라인 요소)가 블록 수준의 자식을 가질 수 없으므로 사용자가 취하려고하는 접근 방식이 유효하지 않습니다. 당연히 당신은 그것을 할 수 있습니다 (스팬 접근법은 호환성을 위해 그리고 유효성을 검사해야하기 때문에 더 낫습니다). 그러나 의미심장하지는 않습니다.