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

Posted 2023-03-06

【中文标题】如何在 IE7 中使空的锚标记可点击？

【英文标题】：How to make an empty anchor tag clickable in IE7?

【发布时间】：2010-12-12 10:39:55

【问题描述】：

我需要在背景图像中创建一个可点击的区域，以生成供 javascript 使用的事件。因此，我创建了一个锚标记，并在其中插入了一些语义上无意义的标记之间的相关文本，然后将其隐藏：

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

然后我给出了锚标记“display:block”的属性、宽度和高度值，并将它绝对定位在我需要它与背景图像相关的位置。在 Firefox 中，这很好用——我将鼠标悬停在上面，我的光标按预期改变了——我有一些可点击的东西。然而，IE7 不喜欢锚标记为“空”的事实，因此不将其视为可点击。所以我把这个添加到 css 中的锚标记中：

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

...这似乎使 IE7 误以为那里有东西。 IE7 现在将该区域视为可点击区域，即使锚标记实际上不存在背景图像。但这对我来说似乎有点像黑客，我想知道是否有更优雅的方法来处理这个问题。任何想法将不胜感激。谢谢。

【问题讨论】：

IE8 也会出现这个问题。

复制好答案 ***.com/questions/6914822/…（在 cmets 中寻找 data:image 技巧）

【参考方案1】：

您发现 IE 存在渲染问题，根据@Simon 下面的说法，至少在 IE9 中问题仍然存在。

您的background: hack 将起作用，但浏览器每次都会发出 HTTP 请求以解析虚假 URL。这可能会损害您页面的性能。为了获得相同的结果但不发出不必要的 HTTP 请求，我建议改用此 URL：

background-image:url(about:blank);

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

顺便说一句，只有当您有绝对或相对定位的 A 元素（或定位块内的 A 元素）时，才会出现问题。普通的非定位超链接在IE7下好像没有这个问题。

【讨论】：

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

不。我的意思是不要使用 IE 必须获取的背景图像的真实 URL。在您的 CSS 中使用 about:blank，这是一个不会导致 HTTP 请求的特殊 URL。你的 html 很好——问题纯粹是 CSS 相关的

是的，这个问题似乎在 IE 9 中仍然存在。你的技巧很有效，谢谢！

这很甜蜜。我打算使用古老的 1px 透明 gif，但这似乎更好。

@JustinGrant 你是我的英雄！谢谢你。我遇到了同样的问题，但情况略有不同。我通过 jQuery 将“按钮”（如热点）附加到没有任何内容的滑块中。只是绝对定位，显示具有宽度和高度的块。但是，在 IE 中，它们根本没有渲染。除非我添加了边框或指定了我不想要的背景颜色。但是您的解决方案非常有效！

【参考方案2】：

去掉语义上无意义的标签，改用普通的 CSS 图像替换。

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

然后是 CSS：

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

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

【讨论】：

这是 *** 用于投票向上和向下投票的箭头。 :-)

有些人现在开始不鼓励使用它，转而支持旧的图像方法：google.co.uk/search?q=stop+using+css+image+replacement+text

【参考方案3】：

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

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

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

【讨论】：

是的，我认为这行得通，但我之前应该提到的一件事是我想保留锚标签......有问题。

【参考方案4】：

我最近在 IE9 及以下版本中遇到了一个问题，即锚标记周围的可点击区域不起作用。没有一个典型的解决方案对我有用。我发现的工作是将这种样式添加到 html 元素：

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

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