Научи ме

WEB => HTML и CSS => Темата е започната от: georgirgeorgiev в 06 Септември 2015, 14:29:10

Титла: IE - проблем с абсолютно позициониран линк
Публикувано от: georgirgeorgiev в 06 Септември 2015, 14:29:10
Здравейте!
Имам един проблем, който не мога да разбера защо се получава.
Имам следния HTML5:

Код: HTML
  1.         <header>
  2.                 <h2></h2>
  3.         </header>
  4.         <img src="" alt="" />
  5.         <span></span>
  6.         <a href="" target="_blank"></a>

В по-горните 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).