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

Question

Структура HTML

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

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

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

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

Answer 1

Решение только для CSS

Tomas- Я изменил вашу скрипку в рабочий пример .Я изменил ваш код, чтобы использовать span внутри тега a, поскольку недопустимо иметь стандартный элемент уровня блока (div) во встроенном элементе (тег a).Задав макет тега a (я использовал inline-block), а затем установив position:relative для этого span с z-index: -1, толкает span «ниже» тега a и заставляет IE7 распознавать a снова как активный тег.Ниже приведен модифицированный код, используемый в моей скрипке.Возможно, вы захотите установить более общее имя класса, чем my ie7AFix (вы, вероятно, также захотите просто настроить IE7 для тех свойств CSS, которые необходимы только для него).Я предполагаю, что вы изменяете width и height по изображениям, и, следовательно, почему вы используете их как встроенный стиль.

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Обновленная скрипка с добавлением line-height, чтобы сделать «кросс-браузер», если вы не хотите ориентироваться только на IE7.Я сохранил width и height в span html выше, только потому, что первоначальный вопрос (как gviswanathan, так и Tomas) требовал его.Если вам по какой-то причине вам не нужно устанавливать размеры на span, а просто пытаетесь сделать двойную границу на изображении, то ответ тридцатки, приведенный в комментарии ниже , намного проще.

Answer 2

В jQuery следующее заставит работать все ссылки и будет иметь курсор «указатель»:

$(document).ready(function () {

    $('a')
        .click(function () {        
            window.location = $(this).attr('href');
        })
        .hover(function () {
            $(this).css('cursor', 'pointer');
        });

});

Я тестировал это имитирующее IE7 с IE8 в режиме просмотра совместимости, но не могу гарантировать, что оно будет работать для IE7 само по себе.

Возможно, вы захотите применить это более избирательно - я подозреваю, что это может замедлить работу более старых браузеров - в этом случае применить класс (например, <a href='myClass'>) ко всем ссылкам, которые не работают таким образом, и просто измените $('a') на $('.myClass')

Answer 3

Просто выньте SPAN из IMG. Элемент IMG может быть стилизован с помощью класса, как и любой другой элемент, поэтому вам не нужно обнимать его.

Answer 4

Вы пробовали использовать прокладку HTML5?Это очень помогает с проблемами, которые вызваны hasLayout .

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 5

Если у вас есть что-то вроде:

<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>

Просто добавьте свойство стиля к якору следующим образом:

<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">

Это сделает div и все внутри него кликабельными в IE7 + и Firefox & Chrome.

Answer 6

Простой способ сделать это:

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`

Answer 7

См. Скрипту и код для демонстрации

Fiddle: http://jsfiddle.net/rxcAb/29/

Демо: http://jsfiddle.net/rxcAb/29/embedded/result/

Отлично работает в IE7, IE8, FF, Chrome, Safari.

Без изменений в коде: см. Ниже

<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
        <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>

Answer 8

Из вашего поста я думаю, что вы хотели кликабельное изображение с текстом информации о промежутке !!Я надеюсь, что это поможет вам;)

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS:

.imgLink {display: block; width: 200px; text-align: center;}​

Answer 9

Просто оберните тег привязки внутри Div или Span.Это работает в IE7.

Этот путь не так ..?

Answer 10

Может быть, проблема в том, что вы не определили href="#" внутри вашего <a> TAG. Итак, поместите href="#" внутри вашего <a> TAG. Напишите так:

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>