阅读这个问题，你可能会'不再考虑'，并希望将其标记为重复。但是在我尝试了我可以在这里和互联网的其他部分找到的每一个修复之后，我想不出另一种方法来获得解决方案，而不是在这里询问。
问题是：我有一个容器，应该是完全可点击的。这个特定网站的问题是，我们无法控制容器内部的元素。由于内部可能存在块元素，因此我们无法使用<a>标记而不是<div>作为容器。我们还希望该网站在no-js环境中工作，因此容器上的onclick不幸是不可能的。
这就是为什么我们选择一个绝对定位的<a>，它将成为整个容器的叠加层。这适用于除IE之外的所有浏览器。
在IE 中，容器的所有内容都绘制在<a>上方，从而使其成为不可点击的区域。这里的例子并不是一个很大的问题：只是一小段文字。但在其他容器中，我们有图像，表格等，它们完全填满了容器的大小。
即使我将z-index的{{1}}更改为<p>，将0的{{1}}更改为z-index，段落仍在链接之上。这怎么可能？我已经阅读了有关堆叠上下文和级别的所有信息，我仍然无法在代码中找到任何错误。
注意：<a>中有一个1 display: hidden;，但这仅供内部使用，我认为这不会影响此问题。
注意：<span>有一个父级，可以从中获得100％的维度。
HTML：
<a>CSS：
div.content__container如上所述，除了IE之外，每个浏览器都能正常工作。我目前正在测试9＆amp; 10，我猜IE＆lt; 9也不会是在公园散步。
修改
根据建议我创建了fiddle。在这个小提琴中，我已经实施了一些评论。例如<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>
的{{1}}行，并从我的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;
}
。我添加了一些JS来澄清哪个元素被点击了。在IE中，它仍然不起作用：段落中的onclick事件正在被触发。
答案 0 :(得分：1)
我偶然遇到过这样一个问题：我有一个空白链接位于我希望可点击的某些内容的顶部 - 我尝试了一切以使其工作，最后发现了一个非常脏的黑客：
制作透明的gif或png（必须至少为50x50），然后将其用作锚点的背景。如果它是最高的z-index
，那么它应该是可点击的我认为你的链接是一个块元素，实际上也覆盖了100％的高度和宽度
答案 1 :(得分：0)
由于内部可能存在块元素，因此我们无法使用
<a>标记而非<div>作为容器。
为什么不呢？ Are block-level elements allowed inside inline-level elements in HTML5?
PS。您的小提琴代码适用于IE8。