rgba background with IE filter alternative: IE9 renders both!
I'm trying use make a div's background transparent using a mixture of CSS3 rgba() and microsoft's filter property like this:
div {
width: 200px;
height: 200px;
/* blue, 50% alpha */
background: rgba(0,0,255,0.5);
/* red, 50% alpha */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
As expected, browsers that support rgba() will render the div as blue, whereas IE 6-8 will render it as red.
IE9 can apparently handle both (previously I thought filter support had been removed) and the result is a purple div. Is there any way of making IE9 support either of these properties but not the other? rgba() would obviously be preferred.
NB I am using IETester to run these tests. If the proper build of IE9 does not do this please let me know.
I've come up with a hacky workaround that I thought I'd share.
IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn't exist on an element we can get IE9 to disable it's filter gradient:
div {
width: 200px;
height: 200px;
/* For FF, Chome, Opera, IE9+ */
background: rgba(0,0,255,0.5);
/* For IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
div:not([dummy]) {
/* IE9 only */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}
I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.
Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.
If you're using HTML5 you may want to go down the route of using
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
and in your CSS use something like :
.ie9 .element {filter: none; }
This seems to work for me (not fully tested in all versions). According to the discussions in this blog the :root selector is only available in IE9 and thus the code below can be written to remove all filter settings in IE9.
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
Edit: !important needed to make sure it works in all places.
链接地址: http://www.djcxy.com/p/89328.html上一篇: CSS背景渐变验证