Question

我有一个链接，由于一些原因，我通过在它上面显示透明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;
}

谢谢！

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

Answer 2

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

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

Answer 3

您只需将pointer-events: none样式添加到锚元素即可禁用该链接。然而，IE不完全支持这一点，关于此here的更多信息。

您也可以使用javascript向锚点添加一个事件处理程序并返回false;使用jQuery，这将是这样的：

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

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

3 个答案:

修改