Проблема со связью в IE6 и IE7 - PullRequest
Новая
       20

Проблема со связью в IE6 и IE7

4 голосов
/ 30 апреля 2009

В последнее время мне тяжело с IE6 по конкретной проблеме, вот немного html, на котором я сейчас работаю: 

<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 / демки / т /

У кого-то есть идея?

Спасибо!

  • edit: Это не работает и в IE7: /

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

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

Ответы [ 7 ]

2 голосов
/ 30 апреля 2009

Я только что попробовал: 

<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>
1 голос
/ 11 октября 2010

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

В конце концов я потерял тег image и заменил его на и установил фоновое изображение внутри диапазона (я мог бы использовать 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>
1 голос
/ 30 апреля 2009

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

<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 с background-image вместо элемента 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>

Edit:

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

<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>
1 голос
/ 30 апреля 2009

Удалите тег span, я не думаю, что он вам нужен 

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

Если вы используете этот стиль ссылок в нескольких местах, удалите идентификатор в 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>
0 голосов
/ 09 ноября 2009

Попробуйте применить к span css свойство "zoom: 0;". Это работает в моем случае.

0 голосов
/ 30 апреля 2009

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

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

0 голосов
/ 30 апреля 2009

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

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

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

Надеюсь, это поможет и удачи;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...