IE: только часть якоря доступна для кликов

Я хочу иметь привязку с определенной высотой и шириной.

На нем нет текста, поскольку он должен быть помещен перед определенной областью страницы.

Вот код:

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a>

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

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

Это действительно странно, это случилось с кем-то раньше? Что-нибудь поможет.

Ответ 1

В предыдущих версиях IE невозможно зарегистрировать событие onclick на самих элементах уровня блока. Вместо этого IE применяет onclick к текстовым или встроенным элементам внутри блока.

Я обнаружил, что помещать прозрачное изображение в якорь, который имеет тот же размер, что и полный якорь, зарегистрирует onclick.

<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
    <img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>

Ответ 2

Другой способ справиться с этой проблемой - немного "хак/обходной путь", когда элемент блока получил фоновый цвет, все в порядке, поскольку вы его оцениваете. используйте что-то вроде этого:

a {
  ..
  background-color: white;
  opacity: 0;
  filter: alpha(opacity=0);
  ..
}

Ответ 3

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

Ответ 4

Любое изображение, размещенное на фоне привязки, а затем помещенное вне поля зрения, устранит вашу проблему для IE6 и IE7. Вам не обязательно иметь изображение полного размера якоря, как было предложено.

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

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>

Ответ 5

возможно, что это проблема z-index с другим div/span/etc.