IE10에서 위치 절대 값 및 Z- 인덱스

Question

이상한 비트, 이미지 위에 몇 개의 링크를 오버레이하려고하는데 IE (모든 버전)에서만 이미지 뒤에 표시됩니다. Chrome, Firefox 등에서 작동합니다.

각 요소에 적절한 z- 인덱스를 부여하려고 시도했지만 실제로 차이가 없습니다.

나는이 문제를 수 백만 번 전에 맹세했습니다.

는 여기에 대한 JSFiddle있어 : 이미지를 통해 링크를 숨길 수있는 이유는 무엇 http://jsfiddle.net/SY8xp/

<a href="#" class="logo-link-a"><span>Link 1</span></a> 
<a href="#" class="logo-link-b"><span>Link 2</span></a> 
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" /> 

.logo-link-a span, .logo-link-b span { 
    display: none; 
} 

.logo-link-a { 
    display: block; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    margin: 25px 0px 0px 0px; 
} 

.logo-link-b { 
    display: block; 
    position: absolute; 
    width: 165px; 
    height: 50px; 
    margin: 25px 0px 0px 50px; 
} 

#logo { 
    margin-top: 30px; 
} 

Answer 1

? 여기 http://css-tricks.com/css-image-replacement/

A : 당신은 당신이 또한 페이지도 여기에

이미지 교체에 약간의 트릭을의 검색 엔진 최적화에 대한 좋은 결과를 가져 오는 이미지 교체를 사용할 수 <a> 태그로 이미지를 포장하고 많은 마크 업없이 링크를 만들 수 있습니다 바이올린 : http://jsfiddle.net/9V5g8/1/

HTML :

<!-- option 1 --> 
<a href="http://www.starbucks.com/"><img src="http://www.starbucks.com/static/images/global/logo.png" alt=""></a> 

    <!-- option 2 --> 
<div class="logo"> 
    <a href="http://www.starbucks.com/"> 
    <h1 class="img-replace"> 
     My Logo 
    </h1> 
    </a> 
</div> 

CSS :

h1.img-replace { 
    width: 85px; 
    height: 84px; 
    background: url("http://www.starbucks.com/static/images/global/logo.png") no-repeat 0% 50%; 
    text-indent: -9999px; 
} 

Answer 2

해킹 된 해결책은 <a /> 요소에 배경색을 추가하는 것입니다. 당신의 jsfiddle의 CSS이 추가는 일 :

.logo-link-a, logo-link-b { 
    background-color: rgba(255,255,255,0); 
}