Неклейкое изображение внутри ссылки в IE7 - PullRequest
Новая
       25

Неклейкое изображение внутри ссылки в IE7

3 голосов
/ 04 марта 2011

Возникла проблема с IE7, вот объяснение.

HTML 

<a class="item" href="http://google.com">
   <div class="itemImg">
       <img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
   </div>
   <h3>Hello World</h3>
</a>

CSS 

.item {
   color: #140804;
   cursor: pointer;
   padding: 17px;
   position: relative;
   text-align: center;
   text-decoration: none;
   width: 142px;
   display:block;}
.item * {
   cursor: pointer;}
.itemImg {
   background: none repeat scroll 0 0 red;
   height: 150px;
   line-height: 150px;
   margin-bottom: 10px;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;}
.itemImg img {
   vertical-align: middle;}

Результат

http://jsfiddle.net/qjSpS/11/

Задача

В IE7 изображение не кликается

Мои мысли о проблеме

Кажется, что проблема как-то связана с установкой свойства hasLayout в .itemImg. Если я удаляю свойства, которые вызывают hasLayout (height: 150px; и overflow: hidden;), тогда изображение будет кликабельным

Вопрос

Есть ли способ решить эту проблему? высота: 150 пикселей; и переполнение: скрыто; обязательные свойства.

Ответы [ 4 ]

3 голосов
/ 20 сентября 2011

Вот как я решил эту проблему .. вместо: 

<a><div><img></div></a>

я сделал это: 

<a href=""><div><div style=background:url(img.jpg);width:10px;height:10px;></div></div></a>

работал как шарм.

3 голосов
/ 04 марта 2011

Возможно, в IE вы не можете обернуть встроенный элемент <a> вокруг элементов уровня блока <div> или <h3>.

Большинство браузеров будут игнорировать его и действовать так, как вы ожидаете, но IE довольно строг в этом вопросе.

1 голос
/ 22 мая 2012 
if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
    $('.itemImg').click(function () {
        $(window.location).attr('href', $(this).parent('a').attr('href'));
    });
}
1 голос
/ 04 марта 2011

Вы заметили, что с изображением красная граница по краю кликабельна?

Я думаю, что причиной проблемы является div.

Можете ли вы покончить с div?

Я настроил ваш пример, чтобы показать, как он может работать без div: http://jsfiddle.net/qjSpS/10/

РЕДАКТИРОВАТЬ был еще один ход: http://jsfiddle.net/qjSpS/14/

Неполностью доволен, но он сделал все элементы кликабельными.

...