1

我正在使用以下 css 作为元素。它只在 Internet Explorer 8 中中断。

background-image: url(../images/icon-save.png);
background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #0c93C0, #FFF);
/*IE7-*/ background-image: url(../images/icon-save.png), filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0);
/*IE8+*/ background-image: url(../images/icon-save.png), -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0)"; 
background-image: url(../images/icon-save.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #383838),
color-stop(1, #666666)
);

我希望 -ms-filter 或 -ms-linear-gradient 都可以工作，但事实并非如此。我浏览了 stackoverflow 中的主题，但没有找到任何包含图像的主题。

4

4 回答 4

2

没有看到 jsFiddle 或没有指向您网站的链接，我在这里假设了一些，但是您正在尝试多个背景图像，是吗？图像+背景渐变？

IE8 不支持多个背景图像，因为它是 CSS3 规范。但是，这可能会奏效：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#383838", endColorstr="#666666",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/icon-save.png");

看到这个问题。

于 2013-07-16T10:49:06.627 回答
2

看起来你基本上是在尝试做 IE8 不支持的事情。即使使用filter渐变（在最好的情况下非常有问题），旧的 IE 也无法处理这样的多个背景。它作为一项 CSS 功能太新了，无法期望像 IE8 一样旧的浏览器支持它。

您也许可以filter修改样式以使其正常工作，但这会很痛苦。如果我是你，我会避免它。

幸运的是，还有另一种选择：CSS3Pie。这是一个插入样式表的小型 JS 库，并为 IE 的 CSS 支持添加了各种功能，包括 CSS 渐变和多个背景图像。

这意味着您可以丢弃所有讨厌的专有filter代码，并将其替换为标准 CSS 代码，即使对于旧 IE 版本也是如此。

当然，它会向您的站点添加一些额外的脚本代码，但它只会被旧 IE 版本加载，因此不会影响其他用户，并且会使您的代码更易于使用。

希望有帮助。

于 2013-07-16T10:59:44.097 回答
2

不幸的是，上述方法均无效。我最终做的是将以下内容添加到仅限 IE8 的 css 文件中。

background: url(../../../../modules/contrib/panels/panels_ipe/images/icon-close.png) no-repeat #666666;

我认为这是比上面建议的两种方法更糟糕的方法，但是由于我无法使它们起作用，因此我将其标记为答案。如果有人认为答案具有误导性，我愿意接受建议:)

于 2013-07-16T13:41:46.470 回答
1

使用过滤器

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#383838", endColorstr="#666666",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/icon-save.png");
于 2013-07-16T10:48:16.783 回答