IE9, IE10 double dipping CSS opacity/filter

Question

I have the following CSS styles for a semi-opaque background to a block element:

/* FF, Chrome, Opera, IE9, IE10 */
background: rgb(255,255,255) transparent; 
background: rgba(255,255,255, 0.7); 
/* IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);

For the most part this works. However, IE9 and IE10 double dip (both the filter and the background style), so that we get an overlay applied twice and it looks pretty opaque.

How can I prevent this occurring?

Cheers!.

score 1 · Accepted Answer · answered Aug 08 '11 at 03:13

1

You can place the filter in a seperate stylesheet and used conditional statements for it

<!--[if lt IE 9]>
    <link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->

I personally find these pretty hacky but sometimes you just need them

answered Aug 08 '11 at 03:13

James Hay

6,057
6
25
51

OK will probably be going with this with an inline style element in the html if nothing better pops up. You are right though, it is ugly. – Alex Aug 08 '11 at 04:10
Yeah, and it's not like you'll be doing something unacceptable. A lot of well designed web pages have these to combat the quirks of IE. – James Hay Aug 08 '11 at 21:30
1

be aware that conditional statements aren't supported by IE10 http://stackoverflow.com/questions/9900311/how-do-i-target-only-ie10-for-certain-situations-like-ie-specific-css-or-ie-spec?lq=1 – Jaider Jan 28 '13 at 16:09

score 1 · Answer 2 · edited May 23 '17 at 12:08

1

How about this solution?

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

edited May 23 '17 at 12:08

Community

1
1

answered Nov 15 '11 at 13:21

Anttu

936
1
9
20

score 0 · Answer 3 · answered Oct 09 '13 at 14:35

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

"This is taken from boilerplated" then you can use classes on your html tag instead so your class specific IE8 style would be fx like this:

.yourclass {
  /* FF, Chrome, Opera, IE9, IE10 */
  background: rgb(255,255,255) transparent; 
  background: rgba(255,255,255, 0.7); 
}
.lt-ie9 .yourclass {
  /* IE7, IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
}

Best workflow in my oppion

score 0 · Answer 4 · answered Aug 25 '11 at 15:22

Try this at the end of all your style sheets:

*:not(#old_ie) {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
}

It works for me. This way you don’t need a separate stylesheet.

Now if someone could just figure out a nice way to “quarantine” CSS for IE9 specifically (without HTML conditional comments)…

IE9, IE10 double dipping CSS opacity/filter

4 Answers4