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

Posted

技术标签:

【中文标题】如果存在背景颜色,IE8 渐变过滤器将不起作用【英文标题】:IE8 gradient filter not working if a background color exists 【发布时间】:2011-05-29 08:03:02 【问题描述】:

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

有人知道怎么解决吗?

【问题讨论】:

我可以建议使用CSS3Pie 来处理这些事情,而不是使用糟糕的filter 语法。这不会直接解决您的问题,但可能会使事情更容易处理。 谢谢,只有这样我才能弄清楚如何破解 CSS3Pie 才能完全工作(css3pie.com/documentation/supported-css3-features/#rgba)......我会留下一个 31k 脚本(12k gzipped)来处理 vs一两行 css。 SECTION 标签是使用 shim 还是 display: block 不要认为这会解决您遇到的问题,或者这只是在您的示例中;但“zoom: 1”不应该有分号吗? @rxgx 我都在使用(Modernizr + display: block in my css) 【参考方案1】:

你可以使用 -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 字符的十六进制代码(十六进制是拉丁文的六个),最重要的是你有相同的颜色来渐变你必须有不同的颜色

【讨论】:

【参考方案2】:

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

显示:内联块;适用于 IE9 并允许锚点具有默认宽度而不是全屏宽度。 display:inline 或未指定显示不允许过滤器按预期工作。【参考方案4】:

看了CSS3please 之后,我意识到我的 IE7/IE8 渐变样式做得有点过分了。只需使用以下样式即可:

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

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

【讨论】:

谢谢!对于在 IE 6-9 中根本不显示的导航项,我有一个背景图像样式;这个 DXImageTransform... 调用成功了! :)【参考方案5】:
#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 */  
  

【讨论】:

【参考方案6】:

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

希望对你有帮助

【讨论】:

【参考方案7】:

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

IE8 是对的,您在 IE8 中看到的(使用 OP 中的代码)是通过渐变过滤器覆盖显示的背景颜色,因为它与使渐变看起来好像不起作用,你得到的只是纯色。这就是所有 IE 中应该发生的事情!

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

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

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

【讨论】:

【参考方案8】:

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

关于 -ms- 前缀,根据 Microsoft 的文档(http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx 向下滚动到“下层支持和 Internet Explorer 4.0 过滤器”,我无法链接到锚点),以 IE8 为目标,应该使用 -ms - 前缀,要针对之前的任何内容,应该使用无前缀的

【讨论】:

【参考方案9】:

您错误地使用了 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;

【讨论】:

嗯,是的,我使用了一个名为 .rgba 的虚拟类来帮助说明我的问题,但是您提出了一个有趣的观点,即通过拆分规则来处理这种 css 冲突……将尝试一下。 ..thx

以上是关于如果存在背景颜色,IE8 渐变过滤器将不起作用的主要内容,如果未能解决你的问题,请参考以下文章

为啥伪元素上的过滤器渐变在 IE8 中不起作用?

IE8中的透明背景颜色

选择具有特定背景颜色的元素

如何在 mac 终端中更改文本颜色和背景?

UITableViewCell 背景渐变在第一次渲染时不起作用

CSS背景(渐变)过渡不起作用