如何在IE7中使一个空锚标签可点击？

Question

我需要在背景图像中单击一个区域以生成一个JavaScript使用的事件.所以,我创建了一个锚标签,在里面我插入了一些语义无意义的标签之间的相关文本然后我隐藏了:

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

然后我给了锚标签'display:block'属性,宽度和高度值,并且绝对定位在我需要它与背景图像相关的位置.在Firefox中这很好用 - 我将鼠标悬停在上面,我的光标按预期变化 - 我有点可点击的东西.但是,IE7不喜欢锚标记为"空"的事实,因此不会将其视为可点击.所以我把它添加到css中的锚标签:

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

...这似乎愚弄IE7,假设有东西存在.IE7现在将该区域视为可点击,即使锚标签实际上不存在背景图像.但这对我来说似乎有些黑客,我想知道是否有一种更优雅的方式来解决这个问题.任何想法将不胜感激.谢谢.

Answer 1

你已经发现了IE的渲染问题,根据@Simon的说法,这个问题至少仍然存在于IE9中.

你的background:黑客会工作,但浏览器每次都会发出一个HTTP请求来解析伪造的URL.这可能会损害页面的性能.为了达到相同的结果,但没有提出不必要的HTTP请求,我建议使用此URL:

background-image:url(about:blank);

about:blank是浏览器显示为空页面的特殊URL,因此它不会影响元素的显示方式,但也不会产生任何HTTP请求.

顺便说一句,问题只发生在你有一个绝对或相对定位的A元素(或定位块内的A元素)时.在IE7下,常规的非定位超链接似乎没有这个问题.

Answer 2

摆脱语义无意义的标签,改为使用普通的CSS图像替换.

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

然后是CSS:

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

添加你需要的任何定位,它应该工作得很好.