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＆amp; 7错误地忽略了后备（因此它不是真正的后备）并且由于错误而具有透明背景颜色，纯粹是因为OP具有指定的十六进制和RGBa颜色使用background-color

有很多方法可以解决这个问题..请参阅：IE Background RGB Bug - 以及最后评论，尤其是方式 - 如果不使用过滤器/渐变，这种解决方法才真正适用仅使用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);
}

希望这有帮助

Answer 4

我发现在过滤器样式起作用之前，我必须将<a>元素从display:inline更改为display:block。此外，颜色可以用4字节序列指定，其中第一个字节是不透明度，然后是rgb，即。 #oorrggbb.例如。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;

Answer 5

你使用的是Modernizer错误的。 Modernizer将类放在HTML元素上;不是每个单独的元素。这是我在IE8中用来为SECTION标签着色的内容。

.rgba section {
    background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
    background-color: #B4B490;
}
.no-cssgradients section {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1;
}

Answer 6

缩放规则是为了确保触发hasLayout，你的用例不需要它可能是因为hasLayout已被触发。

关于-ms-前缀，根据微软的文档（http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx向下滚动到“下层支持和Internet Explorer 4.0过滤器”，没有我可以链接到的锚点），对于目标IE8，应该使用-ms-前缀，在此之前定位任何东西，应该使用未加前缀的

Answer 7

#element {  
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */  
}

Answer 8

适用于IE7和IE8的最佳解决方案是使用渐变图像并将repeat-x：true设置为背景。这适用于我找到的所有浏览器类型。

Answer 9

你可以使用-ms-filter，但我认为它与不透明度相同的问题如果你在-ms之前进行过滤 - 过滤它会失败更多：

该理论的

http://www.quirksmode.org/css/opacity.html

所以你需要这样做：

background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(213,214,215)),
    color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');

这对我有用

除此之外，你不能有一个8字符的十六进制代码（十六进制是六个拉丁语），除此之外你还有相同的颜色渐变，你必须有不同的颜色

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

9 个答案: