javascript - 拉斐尔不透明度不显示在 IE 上

Question

在 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 这似乎适用于浏览器。

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

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

Answer 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。