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!.
4 answers
solution1
1 ACCPTED 2011-08-08 03:13:17
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
solution2
1 2011-11-15 13:21:52
How about this solution ?
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
solution3
0 2013-10-09 14:35:46
<!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
solution4
0 2011-08-25 15:22:17
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)…
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.