Question

好吧，这让我发疯了。在IE8中，背景渐变图像不会显示在页眉或页脚中，但会显示其他背景图像。我在IE9，Firefox，Chrome，Safari或Opera中都没有问题。我已经在这里和其他地方寻找建议的解决方案，但到目前为止还没有工作。使用HTML5和CSS3，我知道有时在旧浏览器中很时髦。

以下是页脚的代码：

footer {
text-align:center;
color:#f9f2e7;
font-size:14px; 
display:block;
background: #26b6c9;
background-image:url(images/bg-footer.png);
background-repeat:repeat-x;
background-attachment:scroll;
position:relative;
height:103px;
clear:both;
width:100%;
float:left;
}

这是标题：

header {
background: #26b6c9;
background-image:url(images/bg-header.png);
background-repeat:repeat-x;
background-attachment:scroll;
margin: 0 auto;
position:relative;
height:159px;
width:100%;
float:left;
}

我试过了display：block和shorhand code like background：url（images / bg-footer.png）repeat-x top left scroll;但都没有工作。

可以找到网站的测试区域here。当这个问题引起我的注意时，我正在开始将其转换为WordPress模板，因此CSS可能仍然有点混乱。

Answer 1

这是因为你正在使用html5 - ie8和更老版本不支持它。

尝试modernizr或html5 shiv

Answer 2

IE 8及以下版本不知道<header>和<footer>等新元素。您需要在文档标题中使用类似html5shim的内容。

尝试将以下内容添加到<head>部分：

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 3

因为IE8及更早版本不支持页眉和页脚标记（html5标记）。您必须先创建它们。

页眉和页脚背景图像不会显示在IE8中

3 个答案: