IE CSS：透明框下的链接可点击答案

【问题标题】：IE CSS: Link under transparent box is clickableIE CSS：透明框下的链接可点击
【发布时间】：2013-03-03 18:30:11
【问题描述】：

我有一个链接，出于几个原因，我通过在其顶部显示一个透明 div 来禁用它。这在 FF 和 Chrome 上工作得很好，但在 IE 上链接仍然是可点击的。如果我向 div 添加背景颜色（透明除外），则链接不可点击。

关于如何实现这一点的任何想法？

<div id=container>
    <div class='disabled'></div>
    <a href="#">Some link</a>
</div>

CSS：

#container{
  position:relative;
}
.disabled{
  width:200px;
  height:30px;
  position:absolute;
  top:0;
  left:0;
}
a{
  display:inline-block;
  width:200px;
  height:30px;
}

谢谢！

【问题讨论】：

为什么不直接做类似onclick="return false;" 的事情呢？

标签： css internet-explorer transparency

【解决方案1】：

Internet Explorer 不能很好地处理“空”元素。由于没有背景和内容，IE 将元素视为不存在，因此您仍然可以与下面堆叠的任何内容进行交互。

要解决这个问题，您可以使用透明 png 作为背景：

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

一个关于可用性的问题 - 如果链接不可点击，链接是否应该仍然存在，或者看起来相同？如果我点击了我认为是链接的链接并且它不起作用，我会担心页面没有正确加载。

编辑

如果出于某种原因，您反对专门为此解决方案创建图像，您也可以使用：

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌AA7");

这将使用数据 uri 用透明 gif 填充背景，并且支持早至 IE8。

【讨论】：

【解决方案2】：

上面的回答让我头疼，但在较新的浏览器中会引发错误。这个类似的行没有：

background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

【讨论】：

【解决方案3】：

您可以通过简单地将pointer-events: none 样式添加到您的锚元素来禁用链接。然而，IE 也不完全支持这一点，更多信息请参见 here。

您也可以使用 javascript 将事件处理程序添加到锚点并返回 false；使用 jQuery 这看起来像这样：

$('a').click(function (e) {return false});

【讨论】：