Internet explorer 8 如果存在背景色，IE8渐变过滤器不工作

我正在尝试使用以下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样式表，我设置的背景色为无。这可能吗

---

有人知道怎么修吗？

你用错了Modernizer。Modernizer将类放在HTML元素上；不是每个单独的元素。下面是我在IE8中用来给分区标签上色的内容

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

看了一眼之后，我意识到我的IE7/IE8渐变风格做得太过分了。只需使用以下样式即可完成此任务：

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

---

显然，不需要-ms过滤器和缩放规则。

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

---

关于-ms-前缀，根据微软的文档（向下滚动到“Downlevel Support and Internet Explorer 4.0 Filters”，我无法链接到任何锚），要瞄准IE8，应该使用-ms-前缀，瞄准之前的任何东西，我们应该使用未修复的版本，只是将其添加为更新-我知道OP得到了他们的答案，但我在试图弄清楚为什么它（回退）在IE7中甚至“起作用”时发现了这个问题，它让我困惑不已，所以我发现了这个问题。。它在IE6/7中工作不正常

IE8是正确的在这里，您在IE8中看到的（与OP中的代码）是通过渐变过滤器覆盖显示的背景色，因为它是使渐变看起来不起作用的同一种颜色，您得到的只是纯色。这是所有IE中应该发生的事情

IE6&7错误地忽略了回退（因此它不是真正的回退），并且由于一个bug而使用透明背景色，纯粹是因为OP具有使用

背景色指定的十六进制和RGBa颜色

有很多方法可以解决这个问题。。请参阅：-和最后一条注释，特别是了解方法-此解决方法仅在不使用过滤器/渐变（即仅使用
RGBa
（半透明）背景）的情况下才真正适用

如果使用MS“filter”渐变来模拟RGBa，MS过滤器将稳定回到IE5.5，因此实际情况是它们不需要回退，并且
背景：无只提供给IE浏览器，以覆盖其他浏览器所需的回退（奇怪的是！）可能是原始情况下的最佳解决方案-回退颜色仅适用于Opera（特别是）和Firefox、Safari等较旧的浏览器版本，在其渐变/rgba尚不受支持的情况下。
，要在IE 7+中使用渐变，您必须将宽度或高度设置为DIV CSS
（至少我不得不这么做）

希望这有帮助
我发现我必须先将
元素从
display:inline
更改为
display:block
，然后过滤器样式才能工作。此外，颜色可以用4字节序列指定，其中第一个字节是不透明的，然后是rgb，即oorrggbb

#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 */  
}  

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

适用于IE7和IE8的最佳解决方案是使用渐变图像并将其设置为repeat-x:true，同时将其置于背景中。这适用于我找到的所有浏览器类型。
您可以使用-ms过滤器，但我想如果您在-ms过滤器之前进行过滤，它会在以下方面失败：

因为这个理论

所以你需要这样做：

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字符的十六进制代码（十六进制是拉丁语的六个字符），除此之外，你还可以有相同的颜色来渐变，你必须有不同的颜色
我可以建议你使用这些东西，而不是使用可怕的语法
过滤器
。这不会直接解决您的问题，但可能会使事情更容易处理。谢谢，只有我才能想出如何破解CSS3Pie以完全工作（）…我将得到一个31k脚本（12k gzip）处理vs一行或两行css。您是否为
部分
标记使用垫片或
显示：块
？不要认为这会解决您遇到的问题，或者这只是您的示例中的问题；但是“zoom:1”不应该有分号吗？@rxgx我正在使用这两个（Modernizer+display:block在我的css中）嗯，是的，我使用了一个名为.rgba的伪类来帮助说明我的问题，但是你提出了一个有趣的观点，关于通过拆分规则来处理css冲突…将尝试它…thxdisplay:inline block；适用于IE9，允许锚定具有默认宽度，而不是全屏宽度。显示：内联或未指定显示不允许筛选器按预期工作。谢谢！我有一个导航项目的背景图像样式，在IE 6-9中根本没有显示；这个图像转换。。。call成功了！：）
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');