html - 右键单击 anchor 未在 IE 中显示预期的上下文菜单

Question

我有以下 HTML:

<a href="somewhere">
    <span class='mask'></span>
    <img src="my_image.jpg" />
</a>

和以下 CSS:

a {
    display: block;
    position: relative;
}

a:hover .mask{
    background: rgba(255,255,255,0.1);
}

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

而且，在视觉上，它按预期工作。 <a> ，悬停时，会在其自身上显示一个半透明的 mask 。

但是，在除 IE 之外的所有浏览器中，当我右键单击 <a> 时，它按预期工作——我看到链接的上下文菜单。

但在 IE 中，我看到的上下文菜单就好像我右键单击了页面中的任何其他静态元素一样。我正在寻找一种使上下文菜单在 IE 中按预期工作的方法。

干杯!

Answer 1

这对我来说适用于 IE 9 - 添加 z-index: -1 到 .mask。尽管 z-index 会影响您的 mask 视觉效果。

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

http://jsbin.com/osegib/1/edit#/osegib/2/edit