IE10 앵커 태그 Z- 인덱스 문제

IE 10에서 일부 콘텐츠 (이미지/텍스트)가있는 비교적 배치 된 래퍼 div가 있습니다. 그 div 안에는 래퍼 div 전체를 덮을 수있는 절대적으로 위치한 앵커 태그가 있습니다. Z- 인덱스가 있습니다. 따라서 래퍼 div 내부의 전체 영역을 클릭 할 수 있어야합니다. 그러나 래퍼 div의 내용이없는 영역 만 클릭 할 수 있습니다. IE 10을 제외한 다른 모든 브라우저에서 전체 래퍼 div를 클릭 할 수 있습니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/NUyhF/3/. 도움?IE10 앵커 태그 Z- 인덱스 문제

background:url(transparent1x1.gif) repeat;

<div class="wrapper"> 
    <div class="imgWrapper"> 
     <img src="http://www.google.com/images/srpr/logo4w.png" /> 
    </div> 
    <p>Here is some text</p> 
    <a href="#"></a> 
</div> 

.wrapper { position : relative; width: 500px; height: 300px; } 
.wrapper a { position: absolute; top: 0px; width: 500px; height: 300px; z-index: 2; }

출처

2013-03-27 Adam Clason

이 나는 투명한 이미지를 만들고 앵커 태그의 배경으로 사용했다이 그것을 해결하기 위해 몇 시간 동안 IE의 성가신 특성을 것으로 나타났습니다 http://jsfiddle.net/NUyhF/6/

출처

2013-03-27 15:36:22 Pete

예, 그 작동합니다. 하지만 단순히 background : rgba (0,0,0,0);를 사용하여 백그라운드 이미지 (=로드 할 추가 리소스) 일 필요는 없습니다. – CBroe

(html5 doctype을 사용하여) 앵커 태그의 블록 수준 요소를 래핑하는 것이 의미 상 정확합니다. 이 마크 업을 수정하는 것이 좋습니다.

HTML

<a href="#"> 
    <div class="imgWrapper"> 
     <img src="http://www.google.com/images/srpr/logo4w.png" /> 
    </div> 
    <p>Here is some text</p> 
</a>

출처

2013-03-27 15:51:07

감사합니다.하지만 유감스럽게도 레거시 브라우저를 지원해야합니다. –

이전 브라우저에서는 정상적으로 작동합니다. 나는 ie7까지 지원하고 아무런 문제가 없다. –

확인 - "HTML5에서 허용됩니다." 나는 두 가지 대답을 모두 받아 들일 수 있었으면 좋겠다. 그러나 JSFiddle은 내가 실제로 가지고있는 html의 단순화 된 버전 이었기 때문에 투명 색상 배경을 사용하는 것이 더 쉬웠습니다. –

IE10 앵커 태그 Z- 인덱스 문제

답변

관련 문제