IE10 balise d'ancrage z-index numéro

Question

Dans IE 10, j'ai un div wrapper relativement positionné avec du contenu (image/texte). A l'intérieur de cette div est une étiquette d'ancrage positionnée de manière absolue qui est positionnée pour "couvrir" l'ensemble div diviseur. Il a un ensemble d'index z. Donc, toute la zone à l'intérieur de la div wrapper devrait être cliquable. Cependant, seules les zones de la div wrapper qui n'ont pas de contenu sont cliquables. Le div wrapper entier est cliquable dans tous les autres navigateurs, sauf pour IE 10. Voici un violon: http://jsfiddle.net/NUyhF/3/. Aidez-moi?

<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; } 

Answer 1

J'ai trouvé que ce un trait ennuyeux de IE pendant un certain temps, pour le résoudre, je devais faire une image transparente et l'utiliser comme l'arrière-plan de la balise d'ancrage:

background:url(transparent1x1.gif) repeat; 

http://jsfiddle.net/NUyhF/6/

Answer 2

Il est maintenant sémantiquement correct d'enrouler des éléments de niveau bloc dans un point d'ancrage (en utilisant le doctype html5). Je suggérerais de modifier votre balisage à cela.

HTML

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