Question

我正在使用以下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中的主题，但我没有发现任何包含图像的内容。

Answer 1

如果没有看到jsFiddle或链接到您的网站，我假设有点在这里，但您尝试多个背景图片是吗？图像+背景渐变？

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

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

请参阅此question。

Answer 2

看起来你基本上都在尝试做IE8不支持的东西。即使使用filter渐变（在最好的时候都是非常错误），旧的IE也无法处理这样的多个背景。它只是一个新的CSS功能，期望与IE8一样古老的浏览器支持它。

你可能能够使用filter风格来破解它，但它会很痛苦。如果我是你，我会避免它。

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

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

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

希望有所帮助。

Answer 3

不幸的是，上述情况并非如此。我最终做的是将以下内容添加到仅IE8的css文件中。

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

我认为这是一种比上面提到的两种方法更差的方法，但由于我不能使它们起作用，我会将其标记为答案。如果有人认为答案误导，我愿意接受建议：）

Answer 4

使用过滤器

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

与线性梯度的背景图象没有出现在ie8

4 个答案: