html - Internet Explorer 9 和 10 中的 zIndex 问题

Question

阅读此问题时，您可能会“不会再想”并希望将其标记为重复。但是，在我尝试了所有可以在此处和互联网其他部分找到的修复程序之后，除了在这里询问之外，我想不出另一种获得解决方案的方法。

问题是:我有一个容器，它应该是完全可点击的。这个特定网站的问题是，我们无法控制容器内的元素。因为里面可能有 block 元素，我们不能使用 <a>标记而不是 <div>作为容器。我们还希望该站点在无 js 环境中工作，因此 onclick不幸的是，在容器上是不行的。

这就是我们选择绝对定位的原因 <a>这将是整个容器的覆盖层。这适用于除 IE 之外的所有浏览器。

在 IE 中，容器的所有内容都绘制在 <a> 上方。 ，从而使其成为不可点击的区域。对于此处的示例，这并不是什么大问题:只是一小段文本。但在其他容器中，我们有完全填满容器大小的图像、表格等。

即使我要更改 z-index的 <p>至 0和 z-index的 <a>至 1 , 该段落仍位于链接的顶部。这怎么可能？我已经阅读了所有关于堆叠上下文和级别的内容，但我仍然无法在我的代码中找到任何错误。

注意:有一个 display: hidden; <span>在<a> ，但这是供内部使用的，我认为这不会影响此问题。

注:div.content__container有一个父级，它可以从中获得 100% 的尺寸。

HTML:

<div class="content__container">
    <p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
    <a href="#" class="__link"><span>text</span></a>
</div>

CSS:

.content__container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.content__container > *{
    position: relative;
}

.__align-to-bottom {
    position: absolute !important;
    bottom: 0;
    left: 0;
}

.__align-to-bottom.__right {
    left: auto;
    right: 0;
}

a.__link {
    position: absolute !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

a.__link span{
    display: none;
}

如前所述，这在除 IE 之外的所有浏览器中都可以正常工作。我目前正在 9 和 10 中进行测试，我猜 IE<9 也不会在公园散步。

编辑

按照建议，我创建了一个 fiddle .在这个 fiddle 中，我已经实现了一些评论。如 display: block; a.__link 行并删除 content__container > *{}从我的CSS。我添加了一些 JS 来阐明正在单击哪个元素。在 IE 中它仍然不起作用:正在触发段落中的 onclick 事件。

Answer 1

我曾经遇到过这样的问题，我有一个空白链接绝对位于我希望可点击的某些内容的顶部 - 我尝试了一切让它工作，最后发现了一个非常肮脏的 hack:

制作透明的 gif 或 png(必须至少为 50x50)，然后将其用作 anchor 的背景。如果它是最高的 z-index，那么它应该是可点击的

我认为你的链接是一个 block 元素，实际上也覆盖了 100% 的高度和宽度