右键单击未在 IE 中显示预期上下文菜单的锚点答案

【问题标题】：Right-click on anchor not showing expected context menu in IE右键单击未在 IE 中显示预期上下文菜单的锚点
【发布时间】：2013-02-19 14:52:31
【问题描述】：

我有以下 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> 悬停时会在其自身上方显示一个半透明的蒙版。

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

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

干杯！

【问题讨论】：

什么版本的IE？刚刚测试了 IE10，感觉还不错jsfiddle.net/2unNW
IE 7 和 8 也适用于我
IE 7、8 和 9 对我来说已经失效了。我会在 repro 中添加一个 jsfiddle。

标签： html internet-explorer css web

【解决方案1】：

这在 IE 9 中适用于我 - 将 z-index: -1 添加到 .mask。虽然 z-index 会影响您的遮罩视觉效果。

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

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

【讨论】：

您介意在图像上使用不透明滤镜吗？同一个遮罩是否覆盖多张图像？