Question

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>元素的边框也有一个悬停效果，并且在瓷砖上的任何地方都可以正常工作，并且显示链接实际上是正确的尺寸。当我删除绝对定位时，链接表现正常但我的布局搞砸了。

是的，或许我应该将链接中的img作为背景图片，但我有一堆这些图块，并且不想为每个附加了唯一css的人提供唯一的名称。关键是，我应该工作，它在其他浏览器中工作。

Answer 1

如果你可以略微重组它，你可以这样做：

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

检查这个小提琴http://jsfiddle.net/vpHSM/

链接只能在具有绝对定位的IE中的文本上单击

1 个答案: