Структура HTML
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Якорь не доступен для кликов только в IE7, я знаю, что проблема возникает из-за hasLayout, если мы удалим высоту и ширину диапазона, он будет работать нормально.
Но мне нужно, чтобы он работал без удаления высоты и ширины.
РЕДАКТИРОВАТЬ: Здесь вы можете сыграть здесь пример: http://jsfiddle.net/rxcAb
Tomas- Я изменил вашу скрипту в рабочий пример. Я изменил свой код на использование span внутри тега a, потому что недопустимо иметь стандартный элемент уровня блока (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; }
Обновлено Fiddle с line-height добавлено для создания "кросс-браузера", если вы не хотите настраивать IE7 только. Я сохранил width и height в span html выше, только потому, что его попросил исходный вопрос (как gviswanathan, так и Tomas). Если вам почему-то не нужно устанавливать размеры на 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 можно стилизовать с классом, как и любой другой элемент, поэтому вам не нужен диапазон.
в 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
предоставляют следующие CSS правила для элемента a:
{
display:block;
overflow:hidden;
}
Может быть, проблема в том, что, поскольку вы не определили href="#" внутри тэга <a> Итак, поместите href="#" внутри тэга <a>. Напишите вот так:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Просто оберните тег привязки внутри Div или Span. Он работает в IE7.
Этот путь неправильный..?
Из вашего сообщения я думаю, что вам нужно кликабельное изображение с текстом с информацией об интерференции! Надеюсь, это поможет вам;)
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;}
Смотрите скрипт для кода и демонстрации
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>
Легкий способ сделать это:
<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.