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

Question

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

谢谢!

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.