html - 图片上的 anchor 在 IE 10 中不可点击，但在 IE 11、Firefox 和 Chrome 中有效

Question

我创建了一个像这样的磁贴:

<div>
  <img src="http://blog.caranddriver.com/wp-content/uploads/2016/01/BMW-i8-Mirrorless-cameras-101-876x535.jpg" width="400" alt="img" />

  <a href="http://www.google.com"></a>
</div>

使用 CSS:

div {
  width: 500px;
  border: 1px;
  height: 500px;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  margin: auto;
}

a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  z-index: 2;
  margin: auto;
}

或者 jsfiddle:https://jsfiddle.net/fvguL0hn/

您会发现在 IE 10 中无法单击该图像，但在 IE 11 works 和其他浏览器中也是如此。

如果你将鼠标移出图像然后你可以点击，但是你用光标返回到图像，然后指针光标变成正常的并且你不能点击就像不知何故 anchor 被隐藏回图像即使我改变了 z-索引。

这只发生在 IE 10 ...

我的错误是什么？我更改了 z-index 但还是一样。

Answer 1

为什么不这样做呢？

<div>
  <a href="http://www.google.com"><img src="http://blog.caranddriver.com/wp-content/uploads/2016/01/BMW-i8-Mirrorless-cameras-101-876x535.jpg" width="400" alt="img" /></a>
</div>