1

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

在 IE9 中，我注意到（由于我使用过滤器：progid:DXImageTransform.Microsoft.gradient）我的覆盖层不可点击，并且不会阻止我点击并悬停在下方。

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

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

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

有没有人有这方面的经验？我可以重新使用 PNG，但如果可能的话，我更愿意坚持使用渐变。

4

2 回答 2

2

你只需要为 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 */
}
于 2012-07-05T16:45:44.287 回答
1

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

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

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

于 2012-07-05T16:19:39.273 回答