你可以学会如何使用旧的浏览器正确处理新的HTML5.
HTML5 浏览器支持
HTML5 支持所有现代浏览器.
此外，所有的浏览器，旧的和新的，自动处理未被识别的元素作为内联元素.
因为这样，你可以“告诉”的旧的浏览器来处理“未知”的HTML元素.
定义语义元素作为块元素
HTML5定义八个新的语义元素。所有这些都是块级元素。.
在旧浏览器中确保正确的行为,你可设置元素的 display属性为block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
加入新的元素到HTML
你也能添加新的元素到HTML页面.
这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>享学课堂</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>一个标题</h1>
<myHero>我的英雄元素</myHero>
</body>
</html>
JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中.
使用IE8的问题
你可以使用上面描述的解决方案为所有新的HTML5元素.
然而, IE8 (和更早的版本) 不允许未知元素的样式!
幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库，可以使IE9或者更早的版本识别新的HTML5元素。
HTML5Shiv 语法
HTML5Shiv 被放在<head> 标签里面.
HTML5Shiv 是一个javascript文件，通过<script>标签引用.
当你使用新的HTML5元素，例如: <article>, <section>, <aside>, <nav>, <footer>时，你可以使用HTML5Shiv来兼容旧的IE浏览器。
你可以从github下载最新的HTML5shiv版本或者使用CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
语法
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
HTML5Shiv 实例
如果你不想下载和存储html5shiv在您的网站上，你可以参考在CDN网站的版本.
HTML5Shiv 脚本必须放在<head>元素里面, 样式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title>享学课堂</title>
</head>
<body>
<section>
<h1>著名城市</h1>
<article>
<h2>伦敦</h2>
<p>伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市.</p>
</article>
<article>
<h2>巴黎</h2>
<p>巴黎是法国首都和人口最多的城市.</p>
</article>
<article>
<h2>东京</h2>
<p>东京是日本的首都，东京大区的中心，也是世界上人口最多的大都市区.</p>
</article>
</section>
</body>
</html>