如何使空锚点在IE7中可点击？

Question

我需要让背景图片中的某个区域可点击，以便在JavaScript中生成事件。因此，我创建了一个锚标记，在其中插入了一些相关文本，并将其隐藏在语义无意义的标记内：

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

我给锚点标签添加了"display:block"属性、宽度和高度值，并将其绝对定位在相对于背景图像所需的位置。在Firefox中，这很好地起作用-当我悬停时，光标会按预期更改-我有可点击的内容。然而，在IE7中，它不喜欢锚点标签是“空的”，因此不将其视为可点击。因此，我在CSS中为锚点标签添加了以下内容：

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

这种方法似乎可以欺骗IE7，让它认为某个东西存在。即使锚标记中没有实际的背景图像，IE7仍然将该区域作为可点击区域处理。但是我认为这似乎有点不太正规，想知道是否有更优雅的方式来解决这个问题。如有任何想法，请不吝赐教。谢谢。

- deluxe_247

---

这个问题在IE8中同样会出现。 - Amir

重复问题，有好的答案 https://dev59.com/YGw05IYBdhLWcg3w9mnd（在评论中寻找`data:image`技巧） - Kos

Answer 1

你在IE浏览器中发现了一个渲染问题，根据下面@Simon的说法，这个问题至少在IE9中仍然存在。

你的background: hack可以解决问题，但是每次浏览器都要进行一次HTTP请求来解析伪造的URL，这可能会影响页面的性能。为了实现相同的结果但不进行不必要的HTTP请求，我建议使用以下URL：

background-image:url(about:blank);

about:blank是一个特殊的URL，浏览器将其显示为空白页面，因此它不会影响元素的显示，但也不会发起任何HTTP请求。

顺便说一句，在IE7中，只有绝对或相对定位的A元素（或定位块内部的A元素）会出现此问题。通常非定位的超链接在IE7下似乎没有这个问题。

- Justin Grant

---

你的意思是使用带有target="_blank"属性的锚标签吗？ - deluxe_247

不要使用真实的URL作为你的background-image，因为这会导致IE进行HTTP请求。在你的CSS中使用about:blank，它是一个特殊的URL，不会引起HTTP请求。你的HTML没问题——问题纯粹与CSS有关。 - Justin Grant

是的，这个问题似乎在IE 9中仍然存在。你的技巧很好用，谢谢！ - Simon East

这真是太棒了。我本来打算使用古老的1像素透明gif，但这个方法看起来更好。 - squarecandy

@JustinGrant 你是我的英雄！谢谢。我遇到了同样的问题，但场景略有不同。我正在通过jQuery将锚点“按钮”（如热点）附加到一个没有任何内容的滑块中。只是绝对定位，显示块状并具有宽度和高度。然而，在IE中，它们根本没有渲染出来。除非我添加边框或指定背景颜色，但我不想这样做。但是你的解决方案完美地解决了这个问题！ - mikkelz

这在2013年下半年的IE10中仍然是一个问题。 - Jerry

Answer 2

去掉那些语义无关的标签，改用普通的CSS图片替换。

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

接下来是 CSS：

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

添加您所需的任何定位，它应该能够正常工作。

- Intelekshual

---

这就是stackoverflow用于投票上下箭头的图标。 :-) - AppleGrew

现在有些人开始不鼓励使用CSS图像替换文本，而更倾向于旧的图像方法：http://www.google.co.uk/search?q=stop+using+css+image+replacement+text - Hari Honor

Answer 3

将 DIV 变成可点击的。如果它调用 JavaScript，你根本不需要锚标签。

如果需要，您可以进行绝对定位。

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

- Diodeus - James MacFarlane

---

是的，我认为那会起作用，但是我之前应该提到一件事，那就是我想保留锚点标签... 这就是问题所在。 - deluxe_247

Answer 4

最近我在IE9及以下版本中遇到了一个问题，即锚点周围的可点击区域无法正常工作。所有通常的解决方法都不起作用。我发现有效的方法是将以下样式添加到HTML元素中：

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

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

- user1580280