rgba背景与IE过滤器替代：IE9呈现两者！ [英] rgba background with IE filter alternative: IE9 renders both!

问题描述

我正在尝试使用CSS3 rgba（）和微软的过滤器混合使用div的背景透明。属性如下：

  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）;正如预期的那样，支持 rgba（）的浏览器   / code>将渲染div为蓝色，而IE 6-8将渲染为红色。
 
 
 
 IE9可以显然处理两者c $ c>过滤器支持已删除），结果是紫色 div。有没有任何方法使IE9支持这些属性，而不是其他？  rgba（）显然是首选。
 
 
 
 N.B。我使用IETester来运行这些测试。如果正确构建的IE9不这样做，请让我知道。
解决方案
我想出了一个hacky的解决方法我认为我会分享。
 
 
 
 IE9及以上版本支持：not（） CSS伪选择器。通过使用一个元素中不存在的属性，我们可以得到IE9来禁用过滤器渐​​变：
  div {
 width：200px; 
 height：200px; 
 
 / *对于FF，Chome，Opera，IE9 + * / 
 background：rgba（0,0,255,0.5）; 
 
 / *对于IE6-9 * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃7FFF0000，endColorstr =＃7FFF0000）; 
} 
 
 div：not（[dummy]）{
 / *仅IE9 * / 
 filter：progid：DXImageTransform.Microsoft.gradient '）; 
} 
  
我最后使用这个，因为我的透明div只有一次。 
 
 
 
 编辑：为了支持其他答案，我从Microsoft开发团队找到本文鼓励开发人员使用条件注释，而不是像我的CSS解决方法。
 
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.

N.B. 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.

                        
这篇关于rgba背景与IE过滤器替代：IE9呈现两者！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！