下面这段代码在chorme、firefox等浏览器下均正常显示，但在IE9以下的版本不能正常显示：
<!DOCTYPE html>
<html>
<head>
<title>mytest</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 50px;
background-color: red;
}
article{
width: 80%;
height: 400px;
background-color: green;
float: left;
}
aside{
width: 20%;
height: 400px;
background-color: grey;
float: right;
}
nav{
width: 100%;
height: 30px;
background-color: yellow;
}
footer{
width: 100%;
height: 90px;
display: block;
background-color: blue;
clear: both;
}
</style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>
在chorme下显示是这样的：
而在IE8及以下版本显示是这样的：
我设置的所有css都失效了，这说明浏览器根本就无法识别这些标签，那要怎么办呢？
接下来介绍两种方法：
1、手动创建标签（比较麻烦，不推荐）
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("main");
document.createElement("nav");
document.createElement("footer");
然而这样还不够，这样建出来的是行内标签，我们还得将他们的CSS设一个display:block;将他们转换成块级元素，这样设置的宽和高才能生效。
2、引入html5shiv.min.js文件（推荐，做大型项目时更简便）
<script type="text/javascript" src="html5shiv.min.js"></script>
或者
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
上面那种需要将html5shiv.min.js下载到本地，可以在这里下载
下面这种直接引入就可以了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
