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

Структура Html

      Some text   

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

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

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

Только решение CSS

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

HTML

      

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 сам по себе.

Возможно, вы захотите применить это более выборочно – я подозреваю, что это может замедлить работу более старого браузера – в этом случае примените class (например, ) ко всем ссылкам, которые были нарушены и просто измените $('a') на $('.https://stackoverflow.com/questions/5735158/image-is-not-clickable-inside-anchor-only-in-ie7/myClass')

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

  

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

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

 { display:block; overflow:hidden; } 

А еще один из них

невозможно достичь в 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:

   Some text and even longer  

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

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

       Some text   

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

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

С вашего поста я думаю, что вам нужен кликабельный образ с текстом span info! Надеюсь, это поможет вам;)

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

   Info text about image  

CSS:

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

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

Сценарий: http://jsfiddle.net/rxcAb/29/

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

Прекрасно работает в IE7, IE8, FF, Chrome, Safari.

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

  

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

 

Some text

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

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

  

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

  

Это заставит div и все, что внутри него, кликать в IE7 + и firefox & chrome.