4

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

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

这是一个例子：http: //jsfiddle.net/GdEak/7/

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

谢谢！

4

3 回答 3

10

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 中。

于 2013-03-03T18:33:24.733 回答
1

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

background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
于 2015-02-14T04:16:12.487 回答
0

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

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

$('a').click(function (e) {return false});
于 2013-03-03T18:37:03.823 回答