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

Question

我的滑块背景显示在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相同的内容。

Answer 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），其中作为background-image的一部分无效。  （background的全部内容是background-*属性的简写。）

Answer 2

您正在使用CSS3＆＃34;多个背景＆＃34;功能，在IE8中不受支持。请参阅this link

上的支持

请阅读this tutorial并找到其所说的标题＆＃34;多个背景＆＃34;。在这里，您将找到一种方法使该属性也可以在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");

Answer 3

添加此行

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

似乎解决了这个问题......