在具有绝对定位的IE中，只能在文本上单击链接
在具有绝对定位的IE中，只能在文本上单击链接
提问于 2013-07-31 06:43:45
IE又一次变得愚蠢了。我有以下html和css：
<div class="tile">
<a href="">this is a link</a>
<img src="images/homepage-tiles/hello.jpg">
</div>
.tile {
width: 145px;
height: 145px;
}
.tile img {
position: absolute;
}
.tile>a {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 9;
box-sizing: border-box;
border: 0px solid grey;
padding: 20px;
}你应该能够点击磁贴上的任何地方来点击链接，但在IE中，只有当你点击链接中的文本时，它才能起作用。奇怪的是，我对<a>元素的边框也有一个悬停效果，这在IE中的任何地方都可以很好地工作，并显示链接实际上是正确的尺寸。当我删除绝对定位时，链接行为正常，但我的布局搞砸了。
是的，也许我应该在链接中只使用img作为背景图像，但我有一堆这样的磁贴，不想给每个带有唯一css的磁贴起唯一的名称。重点是，我所拥有的应该可以工作，而且它在其他浏览器中也可以工作。
回答 1
Stack Overflow用户
发布于 2013-07-31 07:27:45
如果你可以稍微调整一下，你可以这样做：
.tile {
width: 200px;
height: 200px;
}
.tile img {
position: absolute;
border: 0 none;
}
.tile p {
position: absolute;
z-index:9;
left:70px;
}
<a href="#">
<div class="tile">
<p>this is a link</p>
<img src="http://placehold.it/200x200" />
</div>
</a>检查此fiddle http://jsfiddle.net/vpHSM/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17958770
复制相关文章
相似问题
腾讯云开发者
