Изображение целиком в IE

Question

Я работаю над проектом, когда вы его наводите, вы должны щелкнуть по нему. Он отлично работает во всех браузерах. Но по какой-то причине он doenst работу в IE

Live Demo:
http://jewelbeast.com/imghover/rounded.html

HTML:

<div class="vertical-smallborder"> 
    <section> 
     <img src="http://placehold.it/400x600" /> 
     <div class="text"> 
      <span> 
       <h1>This is a title</h1> 
       <p>This is an example of a description.</p> 
       <p>The entire image is a link!</p> 
       <a class="entire" href=""></a> 
      </span> 
     </div> 
    </section> 
</div> 

CSS:

div.vertical-noborder section span a.entire{ 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
} 

Надеюсь, кто-то знает проблему.

Answer 1

Ваш код определенно сложнее, чем нужно - если только нет причин, по которым вам нужно абсолютно позиционировать элементы, вы не должны.

Я считаю, что есть два нежелательных поведения в вашем коде в IE:

1. Margin-left: -250px в DIV толкает элемент вне экрана
2. z-index элементов ставит img над a теге , (link)

Вместо того, чтобы исправить эти ошибки в IE, переписать то, что вы должны обернуть img в a теге.