如果背景颜色存在，IE8渐变过滤器不起作用

2018-06-09 08:28:54

我试图使用下面的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样式表，我设置背景颜色为无。这可能吗？

任何人都知道如何解决它？

在浏览了CSS3please之后，我意识到我正在用我的IE7 / IE8渐变样式来矫枉过正。只需使用以下风格即可完成工作：

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

显然，没有必要使用-ms-过滤器和缩放规则。

只是增加这个作为更新 - 我知道OP得到了他们的答案，但我发现这个问题，同时试图找出它为什么（“后备”）在IE7中甚至“工作”，它让我困惑不已，所以这就是我发现..它在IE6 / 7中无法正常工作...

IE8就在这里，你在IE8中看到的（使用OP中的代码）是通过渐变滤镜叠加显示的背景颜色，并且因为它的颜色相同，所以渐变看起来不起作用，并且所有你得到的是纯色。这就是所有IE浏览器应该发生的事情！

IE6和7错误地忽略了回退 （因此它不是真正的回退）并且由于错误而具有透明背景色，这纯粹是因为OP具有颜色，使用background-color指定了十六进制和RGBa

有很多方法可以解决这个问题..请参阅：IE背景RGB错误 - 以及最后一条评论，特别是关于方式 - 这种解决方法只适用于不使用滤镜/渐变，即真正使用RGBa （半透明）背景。

如果使用MS“过滤器”渐变来模拟RGBa，MS过滤器稳定回到IE5.5，所以现实是它们不需要回退和background: none; 只用于IE浏览器，以覆盖其他浏览器所需的回退（怪异的呵呵！）可能是原始案例中的最佳解决方案 - 回退颜色仅适用于旧版Opera（尤其是）和Firefox，Safari等在他们的gradients / rgba还没有被支持的情况下。

看起来，你必须将宽度或高度放在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);
}

希望这可以帮助

链接地址: http://www.djcxy.com/p/28067.html

上一篇: IE8 gradient filter not working if a background color exists

下一篇: Cookie blocked/not saved in IFRAME in Internet Explorer