Как сделать пустой тег привязки кликабельным в IE7?

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

<a href="#"><i>foo</i></a>

Затем я дал свойства привязки тега "display: block", значения ширины и высоты и абсолютно позиционировал его там, где мне было нужно, чтобы оно касалось фонового изображения. В Firefox это работает красиво - я наводил курсор, и мой курсор менялся, как ожидалось, - у меня есть что-то доступное для клика. Однако IE7 не нравится тот факт, что якорный тег "пуст" и поэтому не рассматривает его как интерактивный. Поэтому я добавил это в тег anchor в css:

background:url(/no-image.jpg);

... который, кажется, заставляет IE7 предполагать, что что-то есть. IE7 теперь обрабатывает область как интерактивную, даже если фоновое изображение не существует для тега привязки. Но для меня это кажется немного взломанным, и мне интересно, есть ли более элегантный способ справиться с этой проблемой. Любые идеи очень приветствуются. Спасибо.

ОТВЕТЫ

Ответ 1

Избавьтесь от семантически бессмысленных тегов и вместо этого используйте обычную замену изображений CSS.

<a href="#">foo</a>

И затем CSS:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat;
}

Добавьте любое позиционирование, которое вам нужно, и оно должно работать нормально.

Ответ 2

Вы обнаружили проблему с рендерингом в IE, и, согласно @Simon ниже, проблема все еще существует, по крайней мере, через IE9.

Ваша background: хак будет работать, но браузер будет каждый раз отправлять HTTP-запрос для разрешения фиктивного URL. Это может ухудшить производительность вашей страницы. Чтобы достичь того же результата, но не делать ненужный HTTP-запрос, я бы предложил использовать этот URL:

background-image:url(about:blank);

about: blank - это специальный URL-адрес, который браузеры отображают как пустую страницу, поэтому он не влияет на отображение элемента, но также не выполняет никаких HTTP-запросов.

Кстати, проблема возникает только тогда, когда у вас есть абсолютно или относительно позиционированный элемент A (или элемент A внутри позиционированного блока). Обычные не позиционированные гиперссылки, похоже, не имеют этой проблемы в IE7.

Ответ 3

Сделайте вместо этого DIV. Если он вызывает JavaScript, вам вообще не нужен тег привязки.

Вы можете абсолютно поместить, если необходимо.

<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div>

Ответ 4

У меня была проблема в IE9 и ниже в последнее время, когда область с клики вокруг метки привязки не работала. Ни один из типичных резолюций не работал у меня. То, что я нашел, добавило этот стиль в элемент html:

html {
position:relative;
z-index:-1001;
}

Упорядочение z-индекса отличается в IE, чем в других браузерах.