css – 背景:颜色在IE8中不起作用

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.我该怎么办?
谢谢!

解决方法

您应该将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垫片来解决这个问题.

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效