Изображение не кликабельно внутри якоря только в IE7
Структура HTML
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Якорь не кликабелен только в IE7, я знаю, что проблема возникает из-за hasLayout, если мы удалим высоту и ширину диапазона, он будет работать нормально.
Но мне нужно заставить его работать без удаления высоты и ширины.
РЕДАКТИРОВАТЬ: Вы можете возиться с примером здесь: http://jsfiddle.net/rxcAb
12 ответов
Только CSS решение
Томас - я изменил твою скрипку в рабочий пример. Я изменил ваш код, чтобы использовать span внутри a тег, потому что недопустимо иметь стандартный элемент уровня блока (div) во встроенном элементе (a тег). Давая a макет тега (я использовал inline-block), а затем настройку position:relative на что span с z-index: -1 толкает span "ниже a тег и делает IE7 распознавать a пометить как активный снова. Ниже приведен модифицированный код, используемый в моей скрипке. Возможно, вы захотите установить более общее имя класса, чем мой 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 и Томас) просил его. Если вам не нужно устанавливать размеры на span по какой-то причине, но просто пытаются сделать двойную границу на изображении, тогда ответ тридцатки, приведенный в комментарии ниже, намного проще.
С 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')
Вы пробовали использовать прокладку HTML5? Это очень помогает с проблемами, которые вызваны hasLayout.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Просто выньте SPAN из IMG. Элемент IMG может быть стилизован с помощью класса, как и любой другой элемент, поэтому вам не нужно обтекать его.
Может быть, это проблема в том, что вы не определили href="#" внутри вашего <a> TAG Итак, поставь href="#" внутри вашего <a> ТЕГ. Напишите так:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Смотрите скрипку для кода и демо
Скрипка: 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>
Из вашего поста я думаю, что вы хотели кликабельное изображение с текстом информации о диапазоне!! Я надеюсь, что это поможет вам;)
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;}
Невозможно достичь в 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>
Вышесказанное является лишь мыслью, и если это не то, что вам нужно, пожалуйста, предоставьте образец http://jsfiddle.net/
Просто оберните якорный тег внутри Div или Span. Работает в IE7.
Этот путь не так..?
Простой способ сделать это:
<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)"; }`
Если у вас есть что-то вроде:
<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.
Передайте следующие элементы CSS элементу a:
{
display:block;
overflow:hidden;
}