IE9 背景:筛选和 jquery 点击事件

Question

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

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

我创建了一个小提琴：http://jsfiddle.net/tJPF6/

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

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

有人对此有任何经验吗？我可以回到使用 PNG，但如果可能的话，我更愿意坚持使用渐变。

Answer 1

你只需要向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 */
}

Answer 2

我建议你留在png。不使用 IE 筛选器功能进行渐变的原因有很多：

• 无论如何，Microsoft都将为 css3 功能弃用它，因为它们将替换过滤器的每个函数
• 根据我的经验，ms 过滤器的渲染引擎（我曾经尝试过一些）与页面渲染的其余部分相结合可能会导致意外结果：
  
  • 元素消失
  • 字体无法正确呈现
  • 链接不可点击，悬停不起作用（您现在遇到的那种）

在您的情况下，如果您已经使用 png 实现了解决方案，请保持原样。它将为您节省很多麻烦，在没有任何地方开始的情况下进行调试所花费的时间等。