Raphael opacity not displaying on IE

问题

I'm having a problem with the opacity of a div when my site is viewed on Internet Explorer. Using Raphael 2.0 (un-minified) I create a rectangle using the following code:

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

In my CSS files if I have transparent divs using the opacity tag, I also write it include filter which seems to work fine for IE.

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

However, Raphael does not appear to allow filter as a property, so this rectangle does not show up at all. This is only a problem on IE - it works on FF/Chrome/Safarai on Win/Mac without a problem.

回答1:

filter only works for IE5-7. To support IE8, you need this property as well before your filter property:

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

This QuirksMode article should help you as well.

---

Actually, try a class:

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

And set your rectangle's class to opacity60 via a setAttribute('class', 'opacity60') call.

来源：https://stackoverflow.com/questions/9959427/raphael-opacity-not-displaying-on-ie