如何在 IE9 中点击透明 PNG？

Question

所以我想在透明 PNG 下方有一个可点击区域。

我在 200x300px 的 div 上放置了一个 200x200px 的 PNG 图像。 div 是鲑鱼色。只有 div 右侧的 100px 是可点击的。

jsFiddle 在这里： http://jsfiddle.net/xhAVU/1/

在现代浏览器中：通过取消注释 pointer-events: none;，您可以看到 PNG 是如何被忽略的，并且可以在任何地方点击鲑鱼 div。

在 IE9 中：无法点击图片。

有没有办法强制IE9点击透明PNG？

Answer 1

https://stackoverflow.com/a/10968016的副本：

替换

<img width="200" height="200" style="pointer-events: none" src="...">

与

<svg width="200" height="200" pointer-events="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="200" height="200"
      xlink:href="..." />
</svg>

因为 IE 支持SVG pointer-events property。

Answer 2

如果 PNG 文件可以移动到 CSS 中，那么我发现您可以在所有浏览器中以这种方式实现它： http://jsfiddle.net/CkmH6/

使用 CSS：

.container {
    width: 500px;
    height: 500px;
    background: #eeeeee;
}
.overlay {
    background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
}
.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
}
​

Answer 3

您是否尝试过使用较低的 z-index 值（例如 10）发送回 png 图像，并使用较高的 z-index 值（例如 20）来提升可点击区域。

这可能有效。看下面的代码。

 .container {
    width: 500px;
    height: 500px;
    background-color: #eeeeee;
}
.container img {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index:10;
   /* pointer-events:none; */
}

.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
    z-index:20;
}