Css 链接只能在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;
}

.瓷砖{
宽度：145px；
高度：145px；
}
.瓷砖img{
位置：绝对位置；
}
.tile>a{
宽度：100%；
身高：100%；
显示：块；
位置：绝对位置；
z指数：9；
框大小：边框框；
边框：0px纯灰；
填充：20px；
}

你应该能够点击平铺上的任何地方来点击链接，但在IE中，只有当你点击链接中的文本时，它才起作用。奇怪的是，我还为

元素的边框设置了一个悬停效果，它在IE中的任何位置都可以很好地工作，并显示链接实际上是正确的尺寸。当我移除绝对定位时，链接会正常运行，但我的布局会出错

---

是的，也许我应该把img作为链接中的背景图像，但是我有一堆这样的图块，不想给每个图块指定唯一的名称，并附加唯一的css。关键是，我所拥有的应该可以使用，而且它在其他浏览器中也可以使用。

如果您可以稍微重新构造它，您可以执行以下操作：

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

.tile{
宽度：200px；
高度：200px；
}
.瓷砖img{
位置：绝对位置；
边界：0无；
}
.瓷砖p{
位置：绝对位置；
z指数：9；
左：70像素；
}

---

检查这把小提琴

你关心哪些版本的IE？图像有多大？链接应该是图片的兄弟吗？IE的所有版本。我的意思是至少10，9，8。否由于边框悬停效果，链接不能包含图像。这会导致图像缩小。我看不到悬停样式，但是如果您担心框大小的变化，为什么不使用

轮廓

而不是

边框

？这不是当前问题的解决方案，轮廓超出了框。我想在盒子里面围一圈。如果我真的想解决这个问题，我可以把图片做成背景图片。我真正想知道的是如何让IE表现得像它应该做的那样。在一个

中有一个

不是有点不对吗？我希望有一个解决方案，只是一个调整工作围绕IE，而不是整个页面的重组。我很确定它验证为可接受的标记，但我知道你只是想要一些不涉及任何重组。祝你好运