IE8 gradient filter not working if a background color exists
I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.
section.rgba{
background-color: #B4B490;
background-color: rgba(200, 0, 104, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
zoom: 1
}
I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?
Anybody know how to fix it?
After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
Apparently, there is no need for the -ms-filter and zoom rules.
Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...
IE8 is right here, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!
IE6 & 7 are incorrectly ignoring the fallback (so it's not really a fallback) and have their transparent background-color because of a bug , purely because the OP has the colors, both hex and RGBa specified using background-color
There are many ways to workaround this.. see: IE Background RGB Bug - and the last comment especially for ways - this workaround would only really be applicable if not using filters/gradients ie really using just RGBa (semi-transparent) backgrounds.
If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.
It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+ ( at least I had to )
.widget-header {
text-align: center;
font-size: 18px;
font-weight: normal;
font-family: Verdana;
padding: 8px;
color: #D20074;
border-bottom: 1px solid #6F6F6F;
height: 100%;
/* Mozilla: */
background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
/* MSIE */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
/* Opera 11.10 + */
background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}
Hope this helps
链接地址: http://www.djcxy.com/p/28068.html上一篇: 在一个div中包装长单词？