IE - проблем с абсолютно позициониран линк

[georgirgeorgiev]

Здравейте!
Имам един проблем, който не мога да разбера защо се получава.
Имам следния HTML5:

Код: HTML

1. <article>
2.         <header>
3.                 <h2></h2>
4.         </header>
5.         <img src="" alt="" />
6.         <span></span>
7.         <a href="" target="_blank"></a>
8. </article>

В по-горните HTML елементи е сложен текст и картинка, просто за примера по-горе съм ги оставил празни, не, че са празни при мен.

Най-основните свойства, които съм сложил на елементите са:

Код: CSS

1. article {
2.    position: relative;
3. }
4.  
5. img {
6.    position: absolute;
7.    bottom: 0;
8. }
9.  
10. a {
11.   position: absolute;
12.   top: 0;
13.   right: 0;
14.   bottom: 0;
15.   left: 0;
16. }

Целта на този абсолютно позициониран линк и нулевите стойности сложени на top, right, bottom и left, е този линк да обхване целият article.
При най-новата версия на Chrome и Mozilla работи, както очаквам. Също при Edge браузъра работи по същия начин. Обаче от IE10 и надолу има разлика. Разликата е, че когато посоча с мишката върху article елемента, браузъра не зачита <a> елемента, който съм позиционирал абсолютно. Само по краищата на article и между заглавието и картинката, курсора на мишката става pointer и засича линка. Обаче нито върху картинката, нито върху залавието на article <a> елемента не бива засечен. Пробвах да сложа z-index на линка, но нямаше промяна. Имате ли представа защо става така?

Ако е позволено (ако не е рекалма) и имате желание, ще ви дам уебсайта ми да ви покаже точно за кой елемент става въпрос и да видите какво е държанието на елемента.

Намерих "решение", така, че линка да бъде видим и да работи и при IE10 и версии надолу, обаче нямам и на идея каква е причината това "решение" да сработи. "Решението" беше, че към <a> елемента добавих още две свойства, които са:

opacity: 0;
background-color: #FFF;

Така работи, обаче сега има проблем, че ако някой потребител задържи първото копче на мишката върху article-а и започне да влачи с мишката по екрана, резултата ще е, че ще започне да влачи един бял правоъгълник, който се явява <a> елемента с бял фон (background-color: #FFF).