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

Ответ 1

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

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, а просто пытаться сделать двойную рамку на изображении, тогда тридцать ответ приведенный в комментарии ниже, намного проще.

Ответ 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')

Ответ 3

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

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

Ответ 4

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

Ответ 5

Ah другое свойство 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

Ответ 6

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

{
    display:block;
    overflow:hidden;
}

Ответ 7

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

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

Ответ 8

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

Этот путь неправильный..?

Ответ 9

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

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;}​

Ответ 10

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

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>

Ответ 11

Легкий способ сделать это:

<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)"; }`

Ответ 12

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

<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.