2

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 的图块赋予唯一的名称。关键是，我所拥有的应该可以工作，并且在其他浏览器中也可以工作。

4

1 回答 1

0

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

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

于 2013-07-30T23:27:44.983 回答