Изображение не кликабельно внутри якоря только в IE7 - PullRequest
Новая
       57

Изображение не кликабельно внутри якоря только в IE7

16 голосов
/ 20 апреля 2011

Структура HTML 

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

Якорь не активируется только в IE7, я знаю, что проблема возникает из-за hasLayout, если мы удалим высоту и ширину диапазона, он будет работать нормально.

Но мне нужно заставить его работать без удаления высоты и ширины.

РЕДАКТИРОВАТЬ: Вы можете играть с примером здесь: http://jsfiddle.net/rxcAb

Ответы [ 12 ]

0 голосов
/ 20 апреля 2011

присваивает элементу a следующие CSS-правила: 

{
    display:block;
    overflow:hidden;
}
0 голосов
/ 20 апреля 2011

АХ еще одна особенность hasLayout

этого невозможно достичь в IE7 и при этом сохранить ширину диапазона, если вы можете показать, чего вы пытаетесь достичь в скрипте JSвозможно, мы могли бы помочь найти способ обойти это, например, и это всего лишь предположение, если поместить ширину в anchor с некоторыми отступами, это поможет создать полностью кликабельную область и все же позволит ограничить область «заголовка», если это то, чтовы после ..

Пример обходного пути не является исправлением

CSS: 

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML: 

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

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

Страница:
...