简介

HTML5shiv is a javascript workaround to provide support for the new HTML 5 elements in IE Browsers older than IE 9.

越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。
而IE6，IE7，IE8是不能识别 HTML5 标签的。
这里提供一种让 IE 浏览器支持 HTML5 的方法，那就是使用 HTML5Shiv。
HTML5Shiv 主要解决 HTML5 提出的新的元素不被IE6-8识别。

为什么要使用 HTML5 的新标签

<header> 定义页面或区段的头部
<footer> 定义页面或区段的尾部
<nav> 定义页面或区段的导航区域
<section> 页面的逻辑区域或内容组合
<article> 定义正文或一段完整的内容
<aside> 定义补充或相关内容

使用他们能让代码语义化更直观，而且更方便 SEO 优化，但是此 HTML5 新标签在 IE6/IE7/IE8 上并不能识别，需要 javascript 处理，所以我们就需要使用目前使用最广泛的 html5shiv.js 了，包括 Bootstrap 框架也是使用的这个来兼容低版本 IE 的。

实现原理

　　这些 HTML5 新元素不能被 IE6-8 识别，不能作为父节点包裹子元素，并且不能应用 CSS 样式。让 CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。HTML5Shiv 就是根据这个原理创建的。

关于 HTML5 不得不提 IE，在苹果、Google、Opera 和 Mozilla 等主流浏览器厂商积极参与新版本 HTML 标准的制定和推广时，微软却对 HTML5 规范不屑一顾。然而微软近期才表态要在 IE 中支持 HTML5,以致到今天为止的 IE8 及以下是无法支持 HTML5 标签的.

使用

HTML5Shiv 的使用非常的简单，考虑到 IE9 是支持 HTML5 的，所以只需要在页面 head 中添加如下代码即可：

1
2
3

<!--[if lt IE 9]>
  <script src=".js/html5shiv.js "></script >
<![endif]–->

The syntax for the HTML5shiv is :

<head>
  <!--[if lt IE 9]>
  <script src="./js/html5shiv.js"></script>
  <![endif]-->
</head>

注意事项

注意事项一

在引入了 html5shiv.js 以后，还需要在你自己的 css 文件中添加:

1
2
3

article,aside,dialog,footer,header,section,footer,nav,figure,menu{
  display:block;
}

主要是让这些 HTML5 标签成块状,像 div 那样。

No matter how ways what did you using, you should be initialize the new lable css.

1
2
3

article,aside,dialog,footer,header,section,footer,nav,figure,menu{
  display:block;
}

注意事项二

　　因为 html5shiv.js 是 JavaScript 文件，如果 IE6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,我们该怎么解决呢?
　　我们可以参照 Facebook 的做法，即引导用户进入带有 noscript 标识的页面，用 xhtml 标签替换 html5 标签，这要比为了保持兼容而写大量 hack 的作法更轻便一些。

<!--[if lte IE 8]> 
<noscript>
<style>
  .html5-wrappers{display:none!important;}
</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="#">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本，或者直接跳到 xhtml 标签设计的页面。

注意事项三

HTML5shiv is found within the <head> tag.
HTML5shiv is a javascript file that is referenced in a <script> tag.
You should usr HTML5shiv when you are using the new HTML5 element such as : <header>,<footer>,<nav>,<aside>,<article>
Download the latest version of HTML5shiv from github or reference the Open Source Software CDN version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js or https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js.
You will require the HTML5shiv to provide compatibility for IE Browser older than IE 9.

Example

HTML 5 Document

If you created a new web page in HTML5,you would include the HTML5shiv as follows:

<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src=".js/html5shiv.min.js"></script>
<![endif]-->
</head>

In this HTML 5 Document example,we have added HTML5shiv within the tag.In this case,the HTML5shiv is a javascript file called html5shiv.js found in the ./js directory.

If you did not want to download and store the HTML5shiv on your site,you could reference the version found on the Open Source Software CDN site.

###

<head>
<meta charset="UTF-8">
<title>HTML 5 Example by https://github.com/addonepiece</title>
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>

<head>
<meta charset="UTF-8">
<title>HTML 5 Example by https://github.com/addonepiece</title>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->
</head>