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!.

Answer 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