13

我正在尝试使用以下 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 样式表。这可能吗？

有人知道如何解决吗？

4

9 回答 9

28

在看了CSS3please之后，我意识到我的 IE7/IE8 渐变样式做得太过分了。只需使用以下样式即可完成工作：

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

显然，不需要 -ms-filter 和缩放规则。

于 2011-02-07T11:08:55.477 回答
9

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

IE8 就在这里，您在 IE8 中看到的（使用 OP 中的代码）是通过渐变过滤器覆盖显示的背景颜色，因为它是相同的颜色，使渐变看起来好像不起作用，而所有你' 得到的是纯色。这就是所有 IE 中应该发生的事情！

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

有很多方法可以解决这个问题.. 请参阅：IE Background RGB Bug - 以及最后一条评论，特别是对于方法 - 这种解决方法只有在不使用过滤器/渐变时才真正适用，即真的只使用RGBa（半透明）背景。

如果使用 MS“过滤器”渐变来模拟 RGBa，MS 过滤器在 IE5.5 上是稳定的，所以现实情况是它们不需要后备并background: none;馈送到仅限 IE 的浏览器，以覆盖其他浏览器所需的后备（奇怪嗯！）可能是原始情况下的最佳解决方案 - 仅在旧版本的 Opera（尤其是）和 Firefox、Safari 等浏览器尚不支持渐变/rgba 的情况下，才需要备用颜色。

于 2011-06-09T23:30:06.690 回答
7

看来，您必须将宽度或高度设置为 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);
}

希望这可以帮助

于 2011-11-08T13:17:53.957 回答
4

I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
于 2012-11-14T18:24:50.797 回答
2

您错误地使用了 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;
}
于 2011-01-24T19:25:53.633 回答
0 
#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 */  
}
于 2012-04-09T05:45:23.083 回答
0

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

于 2013-03-26T17:34:44.317 回答
0

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

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 字符的十六进制代码（十六进制是拉丁文的六个），最重要的是你有相同的颜色来渐变你必须有不同的颜色

于 2013-10-09T14:01:10.613 回答
0

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

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

于 2011-05-05T22:15:30.423 回答