ie 9 support both filter and rgba

Question

I have been search for the solution for 2 hours, this is no suitable solution for my case.

I used rgba to set the opacity level and background color. But you all know ie 8 and below do not support this, so I add a filter to implement this for ie8 and below version of ie. But my problem is ie 9 will show both filter and rgba which makes the color different.

All the css attribute is generated, so here I just can add single attribute(I can not use <if gt IE9> or separate css file for ie9 something like this). I tried to use some css hack to make the rgba as transparent only for ie9, but the css hack for single attribute like :root h{background-color:red/0\IE9;} is not working, is the css hack has already been fixed?

Is there any solution for my problem please? Thank you.

Answer 1

The solution I'd suggest would be to switch from targeting your CSS hack at IE9 on the background-colour style to using an IE8-and-below hack instead on the filter.

The best IE8-and-below hack to use is the \9 hack, as described here.

So something like this:

.myclass {
    background-colour: #rrggbbaa;  /*insert your RGBA colour here.*/
    filter: alpha(opacity=50)\9;   /*the \9 should make it work only in IE8 and earlier*/
}

Adjust the above according to your own needs.

Hope that helps