Мне нужно сделать область внутри фонового изображения, доступную для создания события для использования JavaScript. Таким образом, я создал тег привязки и внутри, что я вставил некоторый релевантный текст между семантически бессмысленными тегами, которые я затем сделал скрытым:
<a href="#"><i>foo</i></a>
Затем я дал свойства привязки тега "display: block", значения ширины и высоты и абсолютно позиционировал его там, где мне было нужно, чтобы оно касалось фонового изображения. В Firefox это работает красиво - я наводил курсор, и мой курсор менялся, как ожидалось, - у меня есть что-то доступное для клика. Однако IE7 не нравится тот факт, что якорный тег "пуст" и поэтому не рассматривает его как интерактивный. Поэтому я добавил это в тег anchor в css:
background:url(/no-image.jpg);
... который, кажется, заставляет IE7 предполагать, что что-то есть. IE7 теперь обрабатывает область как интерактивную, даже если фоновое изображение не существует для тега привязки. Но для меня это кажется немного взломанным, и мне интересно, есть ли более элегантный способ справиться с этой проблемой. Любые идеи очень приветствуются. Спасибо.
Избавьтесь от семантически бессмысленных тегов и вместо этого используйте обычную замену изображений CSS.
<a href="#">foo</a>
И затем CSS:
a {
width:100px;
height:100px;
display:block;
text-indent:-9999px;
background:url(/img.png) no-repeat;
}
Добавьте любое позиционирование, которое вам нужно, и оно должно работать нормально.
Вы обнаружили проблему с рендерингом в IE, и, согласно @Simon ниже, проблема все еще существует, по крайней мере, через IE9.
Ваша background: хак будет работать, но браузер будет каждый раз отправлять HTTP-запрос для разрешения фиктивного URL. Это может ухудшить производительность вашей страницы. Чтобы достичь того же результата, но не делать ненужный HTTP-запрос, я бы предложил использовать этот URL:
background-image:url(about:blank);
about: blank - это специальный URL-адрес, который браузеры отображают как пустую страницу, поэтому он не влияет на отображение элемента, но также не выполняет никаких HTTP-запросов.
Кстати, проблема возникает только тогда, когда у вас есть абсолютно или относительно позиционированный элемент A (или элемент A внутри позиционированного блока). Обычные не позиционированные гиперссылки, похоже, не имеют этой проблемы в IE7.
Сделайте вместо этого DIV. Если он вызывает JavaScript, вам вообще не нужен тег привязки.
Вы можете абсолютно поместить, если необходимо.
<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div>
У меня была проблема в IE9 и ниже в последнее время, когда область с клики вокруг метки привязки не работала. Ни один из типичных резолюций не работал у меня. То, что я нашел, добавило этот стиль в элемент html:
html {
position:relative;
z-index:-1001;
}
Упорядочение z-индекса отличается в IE, чем в других браузерах.