如果存在背景颜色,则IE8渐变滤镜不起作用

Question

我正在尝试使用以下CSS样式.他们正在大多数浏览器上工作,包括ie7.然而在ie8中,透明背景没有显示,而是我得到了我想要留下的背景颜色设置为后备颜色.

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
}

我希望能够让这个工作,而不必诉诸IE样式表,我将背景颜色设置为无.这可能吗？

有谁知道如何解决它？

Answer 1

看了一眼CSS3please后,我意识到我的IE7/IE8渐变样式有点过分.只需使用以下样式即可完成工作:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

显然,不需要-ms-filter和zoom规则.

Answer 2

只是添加这个作为更新 - 我知道OP得到了他们的答案,但我发现这个问题,同时试图弄清楚为什么它("后备")在IE7中甚至"正常工作",它让我感到困惑,所以这就是我的意思发现..它在IE6/7中无法正常工作......

IE8就在这里,您在IE8中看到的(使用OP中的代码)是通过渐变滤镜覆盖显示的背景颜色,并且因为它是相同的颜色,使得渐变看起来像它不起作用而且你所有的得到的是纯色.这就是所有IE中应该发生的事情!

IE6和7错误地忽略了后备(因此它不是真正的后备)并且因为一个bug而具有透明的背景颜色,纯粹是因为OP具有使用指定的十六进制和RGBa颜色background-color

有很多方法可以解决这个问题..请参阅:IE背景RGB错误 - 以及最后的评论特别是方法 - 如果不使用过滤器/渐变,即真正使用仅仅RGBa(半透明)背景,这种解决方法才真正适用.

如果使用MS"过滤器"渐变来模拟RGBa,那么MS过滤器可以稳定回到IE5.5,所以实际情况是它们不需要回退并且background: none;仅用于IE浏览器,以覆盖其他浏览器所需的回退(很奇怪)呵呵!)可能是原始案例中的最佳解决方案 - 只有旧的浏览器版本的Opera(尤其是)和Firefox,Safari等人的渐变色/ rgba尚未得到支持时才需要后备颜色.

Answer 3

看来,你必须将宽度或高度放到DIV CSS中才能在IE 7+中使用渐变(至少我不得不这样做)

.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);
}

希望这可以帮助