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