绝对定位的锚标记（没有文本）在 IE 中不可点击

Posted 2023-03-05

【中文标题】绝对定位的锚标记（没有文本）在 IE 中不可点击

【英文标题】：absolute positioned anchor tag (with no text) not clickable in IE

【发布时间】：2011-10-18 09:26:40

【问题描述】：

我有两个绝对定位在图像顶部的锚点，链接在其他浏览器（Chrome、FF、Safari）中可点击，但在 IE 中不可点击（目前已在 8 和 9 中测试）

奇怪的是，如果我给链接一个 background-color 它们是可点击的，但是如果 background-color 设置为 transparent（这是我想要的）它们不再是可点击，我也试过设置zoom:1，但没有运气。我猜 IE 中的 hasLayout 位在 IE 8/9 中消失了，所以现在猜测 zoom 对于这类问题并不重要。

有什么想法可以让这些链接在 IE 8/9 中显示为透明背景？

这是我一直在使用的小提琴：jsFiddle example

我有以下 html 布局：

<div id="content">
    <img src="http://placehold.it/724x300"    />

    <div id="countdown"></div>

    <a id="link1" href="http://www.***.com" title="link1"></a>
    <a id="link2" href="http://www.***.com" title="link2"></a>
</div>

和 CSS：

body text-align:center;
#content position:relative; width:724px; height:300px; margin:0 auto;

#countdown position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;

#link1 position:absolute; width:520px; height:35px; bottom:20px; left:0;
#link2 position:absolute; width:200px; height:35px; bottom:20px; right:0;

【问题讨论】：

您的链接是不可见的，除非您正在搜索它们。他们不会有任何文字吗？

我以前也遇到过这个问题，尝试使用@Michael的解决方案。这是我能够完成/绕过它的唯一方法。

@tw16 链接将位于图片中可点击的内容之上，链接本身没有文字（基本上是图片地图）

您可以将其编码为 css base64，如下所示：proger.i-forge.net/The_smallest_transparent_pixel/eBQ

【参考方案1】：

我以前也遇到过这个问题，它总是让我很恼火。我不知道为什么会这样，但我总是创建一个 1px x 1px 透明 PNG（或 GIF）并在你的背景声明中使用它，如下所示：

a  background: url("/path/to/image.png") 0 0 repeat; 

希望这会有所帮助。

PS - 不要为此指定任何实际的背景颜色。只需使用上面的示例，它应该可以工作。

除此之外，尝试将您的锚标记设置为显示为块，并可能还在其中插入一个不间断的空格（因为它们目前是空的，这可能会导致 IE 崩溃）：

a  display: block; background: url("/path/to/image.png") 0 0 repeat; 

<a href="#">&nbsp;</a>

【讨论】：

我会避免进行额外的服务器调用来获取图像，因为每个服务器调用都会对页面响应时间产生很大影响（以及服务器负载！）

1x1 图片是个好主意，有点希望有一个更简单的 css 解决方案，1x1 似乎是 90 年代风格的网页设计 :) 感谢您的建议。

1x1 图像解决方案（以及其他“90 年代风格的网页设计”技术，谢谢你让我发笑:)）令人恼火的是它们真的......可靠。例如，它们实现起来令人讨厌，但它们只是工作，通常在所有浏览器中。这样做并不丢人，除非您处理大量流量，否则额外的请求不会伤害您。

@Michael display:block 和   无效，但 bkgd 1x1 有效，谢谢

如果您不想使用图像，可以使用 base64 编码的字符串。这适用于 IE7 和 IE8。背景： url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 重复；

【参考方案2】：

IE 有一个令人讨厌的习惯，即当链接没有任何内容时，它们不会按预期工作。要解决此问题，请为每个链接提供一个   内容。

要尝试的另一件事是在链接上设置display: block; 以使IE 将它们作为块级元素而不是作为内联元素流动。这也可以帮助您需要链接为空。

【讨论】：

  和 display:block 只给出了一个非常小的可点击部分（对于空间），宽度/高度仍然被忽略到可点击区域

【参考方案3】：

@tw16 提到invisible 的评论让我想到了opacity。

将 IE 的 filter:alpha(opacity=0) 与 background-color:#fff（或任何颜色）结合起来似乎是一个很好的解决方案。在 IE 7-9 中测试和工作（6 出于某种原因没有应用不透明度过滤器，但我不需要支持 6，所以这可以工作）

1x1 图像解决方案是全局效果，所以我将把支票交给他。

感谢您的回答。

【讨论】：

唯一的陷阱是你会遇到其他浏览器不使背景不透明的问题。为了避免我只是添加了“不透明度：0；”除了您所做的之外，它还可以全面发挥作用。 IE9 使用了“不透明度”，还有 chrome 和 firefox，IE7/8 使用了“过滤器”。 编辑：我喜欢这个答案，因为它避免了对服务器的额外调用。虽然这对我的服务器性能影响不大，但如果客户端连接到互联网的速度很慢，它可能会加快客户端站点的速度。

@CrowderSoup 对于我的情况，我对其他浏览器（FF、Chrome、Safari）没有任何问题，因为我的问题中的 css 可以解决这些问题，唯一的问题是在 IE 中，因此我只使用了filter:alpha(...)。是的，我同意少往返一次服务器:)

【参考方案4】：

您可以使用提到的background-image 技巧来做到这一点。当您不想为此使用透明图像时，只需在图像 URL 中使用未知方案或 about:blank。

a  background-image: url("iehack:///"); 

或

a  background-image: url("about:blank"); 

这至少在 IE 8 + 9（我测试过的唯一 IE）以及当前版本的 Firefox 和 Chrome 中有效。它仍然是有效的 CSS 并且不会导致额外的流量。使用 jquery 时，第一个“hack”可能会在 Chrome（可能还有其他）中出现 JS 错误。由于about:blank 文档的 MIME-Type 错误，后者仅（但肯定）在 Chrome 中给出 MIME-Type 警告。

【讨论】：

我真的很喜欢这个解决方案，因为它不会产生任何流量，如果它是关于浏览器兼容性和复杂项目的，你总是不得不忍受控制台中的一些警告。非常感谢！

有点长，但仍然没有流量，base 64 编码的透明 gif：background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') ...完全有效。

@morewry 我真的认为您应该将其发布为答案。 ;-)

@Kos 哇，21 票。我想我应该。现在我有了，加上我最近使用的解决方案，我认为还没有在这里发布。

Hack 使其仅在 IE6-8 上工作： background-image: url("about:blank")\9;

【参考方案5】：

我遇到了同样的问题。我的工作解决方案是为适当的锚添加边框。像下面的例子。一个优点是，您不需要额外的图像。

a  border-right: 1px solid transparent 

【参考方案6】：

改编自我前段时间发表的评论。

有点长，但仍然没有流量，base 64 编码的透明 gif：

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

这有其优点/缺点，但可能很有用。另外：

background-color: rgba(0,0,0,0)

我最近用过这个

【讨论】：

我喜欢"background-color: rgba(0,0,0,0)"——它最直接，最不老套！