经过上一节学习，我们已经建立一个结构良好的页面，如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示。
毕竟这些语义元素什么也不做，要支持它们，只要让浏览器把它们当做普通的 <div> 元素就行了。为此我们要做的就是为它们添加点样式规则。之后就可以得到超级可靠的语义元素了，即使使用10年前的浏览器也可以正常浏览。
为语义元素添加样式
浏览器遇到不认识的元素时，会把它们当做内联（inline）元素。大多数 HTML5 语义元素都是块级元素。
因此我们添加一条超级规则，为9个 HTML5 元素应用块级显示格式的规则：
article, aside, figure, figcaption, footer, header, main, nav, section, summary{
display: block;
}
让IE浏览器支持HTML5标准
对于较早版本的 IE 来说，上面的技术还存在问题，它们会拒绝给无法识别的元素添加样式。
好在，有一个变通方案，通过 JavaScript 创建元素，就可以骗过 IE，让它识别外来元素，例如下面的代码：
document.createElement(‘header‘);
实际上，已经有现成的脚本，来解决这个问题了，只需要浏览器处理页面其余部分之前运行。
为了避免不必要地加载 JavaScript 脚本，可以像下面这样把引用脚本放在 IE 条件注释中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>Apocalypse Now</title>
<!-- Patch to make semantic elements work in IE8 and below. -->
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="ApocalypsePage_Revised.css">
</head>
上面这段代码仅会在 IE 浏览器下运行，还有一点需要注意，在页面中调用 html5shiv.js 文件必须添加在页面的 <head> 元素内，因为 IE 浏览器必须在元素解析前知道这个元素，所以这个 js 文件不能在页面底部调用。
html5shiv.js 文件可以从 https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js 下载查看，你可以把html5shiv的js文件直接下载下来让后上传到自己的服务器单独调用。
可能GitHub打开速度有些慢，下面给出 html5shiv.js 的本地下载链接： html5shiv.rar
时间： 2024-10-25 13:10:52