IE9背景：筛选和jquery单击事件

奇怪的问题是，我使用CSS3渐变来创建淡出的叠加效果（ala lightbox）

在IE9中，我注意到（由于我使用了filter:progid:DXImageTransform.Microsoft.gradient），我的覆盖层是不可单击的，并且不会阻止我在下面单击和悬停

我创造了一把小提琴：

预期行为： 点击数字。 模式窗口出现。 无法将鼠标悬停在数字上以获得悬停效果。 可以单击覆盖上的任意位置以将其关闭

IE9行为： 点击数字。 模式窗口出现。 可以将鼠标悬停在数字上以获得悬停效果。 无法单击覆盖上的任何位置以关闭它

---

有人有过这方面的经验吗？我可以继续使用PNG，但如果可能的话，我更愿意使用渐变。

我建议您继续使用PNG。不使用IE过滤器功能进行渐变的原因有很多：

• 微软无论如何都会反对它的css3功能，因为它们将取代过滤器的所有功能
• 根据我的经验，ms filters的呈现引擎（我曾经用它做过一点实验）与页面呈现的其余部分相结合，可能会导致意外的结果：
  
  • 元素消失
  • 字体渲染不正确
  • 链接不可点击，悬停不起作用（您现在正在体验的那种）

---

在您的情况下，如果您已经用png实现了一个解决方案，请保持原样。它将为您节省大量的头痛和调试时间，而无需从任何地方开始等等。

您只需在div中添加一个真实的背景。IE存在着臭名昭著的问题，无法识别对具有透明背景的元素的点击，而CSS使背景在技术上对每个版本的IE都是透明的（过滤器不算作背景）

只需在其他背景定义之前添加回退背景，即：

#transCover {
    background:#666; /* add this line */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 1%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(1%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 1%,rgba(0,0,0,0.4) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}