拉斐尔不透明度未在 IE 上显示答案

【问题标题】：Raphael opacity not displaying on IE拉斐尔不透明度未在 IE 上显示
【发布时间】：2012-04-15 02:38:06
【问题描述】：

在 Internet Explorer 上查看我的网站时，我遇到了 div 的不透明度问题。使用Raphael 2.0（未缩小）我使用以下代码创建了一个矩形：

var rIn = Raphael("myDiv", "100%", "100%");
rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6});

在我的 CSS 文件中，如果我有使用 opacity 标记的透明 div，我也会写它包括 filter，这似乎适用于 IE。

opacity:0.6; filter: alpha(opacity = 60);

但是，Raphael 似乎不允许 filter 作为属性，所以这个矩形根本不会出现。这只是 IE 上的问题 - 它可以在 Win/Mac 上的 FF/Chrome/Safarai 上正常运行。

【问题讨论】：

【解决方案1】：

filter 仅适用于 IE5-7。要支持 IE8，您还需要此属性之前您的filter 属性：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

这个QuirksMode article 也应该对你有所帮助。

其实，试试上课：

.opacity60 {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}

并通过setAttribute('class', 'opacity60') 调用将矩形的类设置为opacity60。

【讨论】：

谢谢@Blender。我也可以为 Raphael 属性使用类似的属性吗？
向 Raphael 对象添加一个类。
我在.css 中声明了一个类，并尝试使用以下rIn.rect.setAttribute('class', 'opacity60') 设置属性，但在IE 中收到以下错误消息：SCRIPT438: Object doesn't support property or method 'setAttribute'
引用rect的底层元素，像这样：rIn.rect.node.setAttribute('class', 'opacity60')。
我尝试了该建议@EliranMalka，但收到以下错误消息SCRIPT5007: Unable to get value of the property 'setAttribute': object is null or undefined。我确实在我的 CSS 中声明了一个类。