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

Question

提问by uglymunky

I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.

我正在尝试使用以下 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
}

I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?

我希望能够让它工作而不必求助于我将背景颜色设置为无的 IE 样式表。这可能吗？

Anybody know how to fix it?

有谁知道如何修复它？

Answer 1

回答by uglymunky

After glancing over at CSS3pleaseI realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:

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

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

Apparently, there is no need for the -ms-filter and zoom rules.

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

Answer 2

回答by clairesuzy

Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...

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

IE8 is righthere, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!

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

IE6 & 7 are incorrectly ignoring the fallback(so it's not really a fallback) and have their transparent background-color because of a bug, purely because the OP has the colors, both hex and RGBa specified using background-color

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

There are many ways to workaround this.. see: IE Background RGB Bug- and the last comment especiallyfor ways - this workaround would only really be applicable if not using filters/gradients i.e. really using just RGBa(semi-transparent) backgrounds.

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

If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none;fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.

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

Answer 3

回答by morgan_il

It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+ ( at least I had to )

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

Hope this helps

希望这可以帮助

Answer 4

回答by user982671

I found I had to change the <a>element from display:inlineto display:blockbefore 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.

我发现我不得不改变<a>元素从display:inline到display:block之前过滤器的风格会工作。此外，可以使用 4 字节序列指定颜色，其中第一个字节是不透明度，然后是rgb，即。#oorrggbb.例如。

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

Answer 5

回答by Ryan

You're using Modernizer wrong. Modernizer places classes on the HTML element; not each individual element. Here's what I used in IE8 to color the SECTION tags.

您使用 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

回答by seutje

The zoom rule is to make sure hasLayout was triggered, your use-case not having a need for it is probably because hasLayout is already being triggered.

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

regarding the -ms- prefix, according to Microsoft's documentation ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspxscroll down to "Downlevel Support and Internet Explorer 4.0 Filters", no anchors I can link to), to target IE8, one should be using the -ms- prefix, to target anything prior to that, one should be using the unprefixed one

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

Answer 7

回答by bearcatFulton

The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.

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

Answer 8

回答by Simon Dragsb?k

you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:

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

http://www.quirksmode.org/css/opacity.htmlfor that theory

http://www.quirksmode.org/css/opacity.html该理论

so you need to do like this:

所以你需要这样做：

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');

this works for me

这对我有用

besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors

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

Answer 9

回答by j.ghadiri

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

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

提问by uglymunky

回答by uglymunky

回答by clairesuzy

回答by morgan_il

回答by user982671

回答by Ryan

回答by seutje

回答by bearcatFulton

回答by Simon Dragsb?k

回答by j.ghadiri

相关推荐

最近更新

标签

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

提问by uglymunky

回答by uglymunky

回答by clairesuzy

回答by morgan_il

回答by user982671

回答by Ryan

回答by seutje

回答by bearcatFulton

回答by Simon Dragsb?k

回答by j.ghadiri

相关推荐

CSS 有 SASS.js 吗？像 LESS.js 之类的东西？

less-css -- 有可能得到父母的父母吗？

CSS Firefox 和 Chrome 之间的 1 像素线高差

溢出滚动 css 在 div 中不起作用

相关推荐

最近更新

标签