проблема Ссылка на IE6 и IE7

Я с трудом с IE6 в последнее время на той или иной проблеме, вот немного HTML я на:проблема Ссылка на IE6 и IE7

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
     <img src="img.jpg" alt="My image" /> 
    </span> 
</a>

Все отлично с Firefox и т.д., но ссылка не будет работать, щелкнув непосредственно на изображении на IE6 (но будет работать в другом месте по ссылке).

Вот ссылка: http://www.daniel-rico.com/demos/ie/

Кто-то есть идея?

Спасибо!

редактировать: Это не работает на IE7 либо:/

Спасибо за ваши ответы!
Мне нужен тег span. Я должен был объяснить немного больше, что я пытался сделать; вот он:
Мне нужна коробка, которую можно щелкнуть. Внутри этого мне нужно:

другой коробка с фиксированного размером, который будет содержать динамическое изображение (случайное отношение)
некоторого текст

источник

2009-04-30 Daniel

Можете ли вы объяснить, что желаемый визуальный эффект, так что я могу понять необходимость размаху тега –

Что произойдет, если вы установите отображение img для блокировки? – meandmycode

И он не работает в IE8. –

Удалить калибровочный тег, я не думаю, что вы это нужно

<div style="width: 200px; height: 200px;"> 
    <a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;"> 
     <img src="img.jpg" alt="My image"/> 
    </a> 
</div>

Если у вас есть контроль над разметкой затем извлечь встроенные стили и использовать

<div id="link"> 
    <a href="http://www.mylink.com"> 
     <img src="img.jpg" alt="My image"/> 
    </a> 
</div>

В заголовке документа добавить ссылку на внешнюю таблицу стилей

<head> 
    <link rel="stylesheet" type"text/css" href="/Css/Style.css"/> 
</head>

Создать style.css и добавьте

div#link 
{ 
    width: 200px; 
    height: 200px; 
} 

div#link a 
{ 
    display: block; 
    width: 100px; 
    height: 100px; 
}

Если вы используете этот стиль линии в нескольких местах удалить id на div и заменить на

<div class="link"> 
    ... 
</div>

И измените селектор в css от # до.

div.link 
...

Если у вас возникли проблемы только в IE6 вы также можете использовать условные комментарии для включения таблицы стилей, которая исправляет IE6 конкретные проблемы

<head> 
<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="/Css/IE6.css"/> 
<![endif]--> 
</head>

источник

2009-04-30 08:14:32

Самый простой способ сделать это область интерактивными, чтобы добавить позицию : относительный к вашему стилю связи; чтобы сохранить стиль курсора в IE6, вы можете добавить курсор : hand к вашему элементу span.

a{ position: relative; display: block; width: 200px; height: 200px; } 
span{ display: block; width: 100px; height: 100px; cursor: hand }

Как и другие предлагаемые, лучше отделить конкретный стиль IE6 с условным блоком комментариев.

Надеется, что это помогает и удаче;)

источник

2009-04-30 08:55:54 yaanno

спасибо за ваш ответ, я уже пробовал позицию относительно ссылки и всех элементов, я также пробовал играть с z-index, но ничего не работает:/ Вот прямая ссылка, где вы можете проверить проблема: http://www.daniel-rico.com/demos/ie Thx everyone! – Daniel

Как ни странно, удаляя свойства ширины и высот от диапазона позволяет нажать на изображении.

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;"> 
     <img src="img.jpg" alt="My image" /> 
    </span> 
</a>

Конечно, это полностью меняет макет, но может помочь решить проблему с IE.

Альтернативный метод должен был бы использовать DIV с изображением фона вместо элемента IMG:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
     <div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div> 
    </span> 
</a>

Редактировать:

Раствор фоновое изображение не работает для случайного которое вы упомянули в своем комментарии. Если вы просто хотите, чтобы достичь макет в макете:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;"> 
     <img src="img.jpg" alt="My image" /> 
     <span style="padding-left:10px;">some text</span> 
</a>

источник

2009-04-30 09:53:34 brianpeiris

я не смог решить эту проблему только с помощью CSS, я использовал Javascript, чтобы заставить область быть интерактивными. Неудовлетворительно, но хорошо, это работает ...

Спасибо всем за вашу помощь! Я ценю это :)

источник

2009-04-30 11:13:15 Daniel

Можете ли вы опубликовать свое окончательное решение, если оно у вас все еще есть? –

я просто попробовал его на:

<span style="display:block;width:100px;height:100px;"> 
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
     <img src="img.jpg" alt="Click your image now" /> 
</a> 
</span>

источник

2009-04-30 17:18:01 DaDa

Попробуйте применить, чтобы охватить CSS свойство "зум: 0;". Это работает в моем случае.

источник

2009-11-09 15:37:15

Я столкнулся с почти идентичной проблемой, создающей навигацию на сайте, управляемом контентом, но усугублялся тем, что некоторые элементы навигации, необходимые для открытия в новых окнах, означающие, что решение использовать javascript стало проблематичным.

В конце концов, я в конечном итоге потери < IMG .../> тега и замену с пролетом < .../> и установкой фонового изображения внутри диапазона (я мог бы использовать DIV, но это плохая форма в соответствии с W3C).

Так возвращаясь к исходному примеру, я бы с:

<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;"> 
    <span style="display:block;width:100px;height:100px;"> 
    <span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;"> 
     <span class="Hidden">My image</span> 
    </span> 
    </span> 
</a>

источник

2010-10-11 04:45:58

проблема Ссылка на IE6 и IE7

ответ

Смежные вопросы