CSS 问题 - Box 上方的链接（位置：绝对）在 IE + Opera 中不起作用

Posted 2023-04-13

【中文标题】CSS 问题 - Box 上方的链接（位置：绝对）在 IE + Opera 中不起作用

【英文标题】：CSS Problem - Link (position:absolute) above a Box not work in IE + Opera

【发布时间】：2011-09-20 06:00:53

【问题描述】：

我在 div-box 的底部有一个链接，它有 position:absolute 并且应该覆盖整个 div-box。

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

在 FF 和 Webkit 中可以正常工作，但在 IE + Opera 中，“某些文本”仍然不是链接，也无法点击。

有人有想法吗？ :) 谢谢

【问题讨论】：

它现在看起来已经在 Opera 中修复了。

【参考方案1】：

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

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

它是非常透明的背景。

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

它在 IE8 中不起作用。

【讨论】：

哦，是的，在歌剧中它有效。谢谢！似乎有点像背景错误......但 IE 仍然很烂

@co-KANH 是对的：答案是 gif 1px x 1px 透明。这使它无处不在。

【参考方案2】：

问题已解决 - 只需在 css 中添加链接的透明背景 - 对我来说，透明 gif 文件可以正常工作。

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

【参考方案3】：

我使用了 Pavlin 提出的相同解决方案，但使用了 1x1px 透明 GIF 数据-url-encoded，这样：

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

因此，您可以避免向服务器发送额外的 http 请求，而 CSS 样式表只增加了很少的字节。 IE8+支持Data-url。http://caniuse.com/datauri

【参考方案4】：

仍然不知道这个错误来自哪里...... 就我个人而言，我只是在那里放了一些完全透明的背景

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

【讨论】：

我测试了多个选项，并发现这是最好的解决方案，个人 :) 我通过执行以下操作找到了错误：position: absolute; top: 0; left: 0; right: 0; bottom: 0; -- 警告：sass 将转换 @987654323 @ 到 transparent 这不起作用。所以试试：rgba(0,0,0,0.01); in sass。

【参考方案5】：

如何在 div 周围放置链接标签（a）：

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

我相信应该可以解决它。

【讨论】：

嗯，抱歉，这无效：validator.w3.org/#validate_by_input+with_options

它确实有效，在我看来，这比有效更重要。如果没有其他方法，您可以使用此选项。

【参考方案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

【讨论】：

如果你不想使用 javascript 然后看看这个小提琴：jsfiddle.net/rathoreahsan/cLmqe ---- Pure CSS & xhtml 正如你试图做的那样。 w3c 不接受其他用户的其他小提琴。根据 w3c 规则，您不能在 标记内定义 标记。

thanx，是的，它很好用:)。但实际上我想尝试在没有 javascript 的情况下解决这个问题....嗯

看看这个小提琴：jsfiddle.net/rathoreahsan/cLmqe ---没有javascript也可以正常工作