Internetexplorer-CSS问题-链接(位置:绝对)在一个盒子上不能在IE+Opera中工作

Question

我在一个div框的底部有一个链接，它的位置：absolute，应该覆盖整个div框。

就像这样：http://jsfiddle.net/UpwvT/4/

在FF和Webkit中，它工作得很好，但在IE+Opera中，"一些文本"仍然不是链接，也不可点击。

有人知道吗？：）乙醇

Answer 1

它看起来像Opera和IE中的bug。

这是我对Opera和IE9的破解。为.link添加此项
background-color: rgba(204,204,204,0.01);

它是非常透明的背景。

http://jsfiddle.net/UpwvT/19/

它在IE8中不起作用。

Answer 2

问题解决了-只需在css中添加链接的透明背景-对我来说，使用透明gif文件可以很好地工作。

.link_css{
background: url(path_to_your_file/trans.gif);
}

Answer 3

我使用了Pavlin提出的相同解决方案，但使用了1x1px透明GIF数据url编码，这种方式：

.link_css{
  background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

因此，您可以避免在CSS样式表中增加很少字节的情况下向服务器发出额外的http请求IE8+支持数据url
http://caniuse.com/datauri

Answer 4

仍然不知道这个错误是从哪里来的。。。就我个人而言，我只是把一些完全透明的bg放在那里

background: rgba(0,0,0,0);

Answer 5

把链接标签（a）放在div周围怎么样，比如：

<a class="link" href="http://google.com">
    <div class="box">
        some text
        <div class="linkbox">
            &nbsp;
        </div>
    </div>
</a>

编辑

以下也应该是可能的：

<div class="box">
    <a class="link" href="http://google.com">
        some text
        <div class="linkbox">
            &nbsp;
        </div>
    </a>
</div>

我认为应该修复它。

Answer 6

不需要像这样在框内添加链接框：

<div class="box" onclick="location.href='http://google.com'">
    some text
</div>

并定义如下样式：

<style>
    .box {
        width:200px;
        height:200px;
        background:#ccc;
        position:relative;
        text-align:center;
        z-index:1;
        cursor: pointer;
        cursor: hand;
    }
</style>

工作演示：http://jsfiddle.net/rathoreahsan/cLmqe