css - 背景：颜色在 IE8 中不起作用

Question

body {
    background: gray; 
    font-family: sans-serif;
    width: 960px;
    margin: auto;
}

header {
    background: green;
    border: 10px solid black;
}

nav {
    margin-top:10px;
    background: #62D99C;
    border-radius: 10px;
    padding: 10px;
}

页眉和导航背景在 IE8 中不起作用。它确实适用于 Chrome 和 FF。我该怎么办？谢谢！

Answer 1

您应该适用display:block于 header 和 nav 元素：

header {
  display: block;
  background: green;
  border: 10px solid black;
}

nav {
  display: block;
  margin-top:10px;
  background: #62D99C;
  border-radius: 10px;
  padding: 10px;
}

看来您还需要包含以下js：

<!--[if lt IE 9]>
<script>
  document.createElement('header');
  document.createElement('nav');
</script>
<![endif]-->

可以在这里找到原因：

http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

简而言之，IE8 默认不支持 HTML5 元素，但通过执行此 javascript （仅适用于 IE8 或更低版本），它开始识别这些元素。大多数开发人员使用某种形式html5 shim来解决这个问题。

http://code.google.com/p/html5shim/

Answer 2

看起来 IE8 不支持 HTML4 中不存在的 HTML5 功能（这包括新的元素header和nav）。请参阅问题的答案是否 IE8 支持 HTML5 和 CSS3？

尝试用旧的工作方式替换元素：<div class="nav">并使用 CSS-selector .nav。

Answer 3

背景颜色在 Internet Explorer (IE) 上不起作用

IE 在呈现网页之前应用了一些过滤器。这就是为什么某些页面颜色发生了变化。

您可以在 CSS 类中添加以下行来避免它。

 filter: none !important;