滑块背景在 IE8 中无法正确显示答案

【问题标题】：Slider background doesn't show correctly in IE8滑块背景在 IE8 中无法正确显示
【发布时间】：2014-11-15 08:03:11
【问题描述】：

我的滑块背景显示在 Chrome、Firefox 和大多数版本的 IE 中，但在 IE8 中不显示。它的背景保持与页面其余部分相同的颜色。

.site-slider {
    width: 100%;
    background: url(images/alexandria/header_overlay.png) no-repeat center top,
                url(images/alexandria/header_bg.jpg);
}

如果我将 background 更改为 background-image，每个浏览器都会显示与 IE8 相同的内容。

【问题讨论】：

标签： css internet-explorer-8

【解决方案1】：

IE doesn’t support multiple backgrounds until version 9. 您可以通过添加一个包装元素并将一个背景应用于父级和一个子级来解决此问题。

.site-slider-wrapper {
    background-image: url(images/alexandria/header_bg.jpg);
}

.site-slider {
    background: url(images/alexandria/header_overlay.png) no-repeat center top;
}

将属性名称更改为 background-image 会破坏每个浏览器中的 CSS 的原因是第一个背景设置了 background-repeat 和 background-position 属性 (no-repeat center top)，它们作为 @ 的一部分无效987654327@。（background 的全部意义在于作为background-* 属性的简写。）

【讨论】：

【解决方案2】：

您正在使用 IE8 不支持的 CSS3“多背景”功能。在this link 上查看它的支持

请阅读this tutorial 并找到标题为“多重背景”的标题。在这里，您将找到一种方法使该属性也可以在 IE8 上运行。

其次，background 是一个速记属性，您可以在其中组合/定义以下属性的值：

background-color
background-image
background-repeat
background-attachment
background-position

例如：background: #00ff00 url("smiley.gif") no-repeat fixed center;

另一方面，如果您使用上面列表中的任何属性，它将只接受特定于它们的值。如果您尝试将任何其他属性值与它们结合起来，它们将不起作用。由于同样的原因，您的 background-image 属性不起作用。只能将图片的url定义为background-image的值

例如：background-image: url("paper.gif");

【讨论】：

【解决方案3】：

添加这一行

src /*\**/: url('skins/fonts/titillium/TitilliumText22L003-webfont')\9

好像解决了...

【讨论】：