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

添加您需要的任何定位，它应该可以正常工作。

Answer 3

改为点击DIV。如果它正在调用JavaScript，则根本不需要锚标记。

如果需要，你绝对可以定位。

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

Answer 4

我最近在IE9及以下版本中出现了一个问题，即锚标签周围的可点击区域无效。没有一个典型的决议对我有用。我发现的工作是将这种风格添加到html元素：

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

IE中的z-index排序与其他浏览器不同。

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

4 个答案: