html5shiv 让 IE 也能支持 HTML5 标签的 JavaScript 兼容库

Question

大家都知道，HTML5 是未来发展的趋势，至于能不能替代 Flash 这个暂时不考虑，但是现在新的标准还没有出来，很多人又想尝试一下 HTML5 给我们所带来的惊喜，html5shiv 这个JavaScript兼容库，可以把 HTML5 的新元素转换成 IE6 认识的内容。

使用方法

作者已经把这段代码放到了 Google code project 上，不过由于 Google 的原因不能访问了，只需要在你的 head 标签中中调用这段代码就行。

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

当然你也可以直接把这个文件下载到自己的网站上。这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！或许你还要在你的 CSS 文件中加上以下代码，不然有可能会出现些莫名其妙的问题。

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

另外 excanvas.js 是 Google 为 IE6 支持 Canvas 元素写的脚本，里面有很详细的例子，感兴趣的朋友可以去试试。

html5shiv原理

针对 IE 浏览器比较好的解决方案是 html5shiv。html5shiv 主要解决 HTML5 提出的新的元素不被 IE6-8 识别的问题，这些新元素不能作为父节点包裹子元素，并且不能应用 CSS 样式。让 CSS  样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv 就是根据这个原理创建的。

HTML5 Shiv 能够使用 HTML5 新加入的元素在旧版本的 Internet Explorer 浏览器上得到兼容，HTML5 Shiv 能够兼容 Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x 等浏览器。

项目文件介绍

html5shiv.js

这包括基本 createElement() 核心技术，对 IE6-8 中 document.createElement 和 document.createDocumentFragment的调用，能够兼容 IE6-9, Safari 4.x and FF 3.x 等浏览器。

html5shiv-printshiv.js

这包括以上所有，也是一种机制，允许HTML5元素为包含的子元素，在IE 6-8的浏览器上正常的显示。

HTML5 Shiv API

HTML5 Shiv 作为一个简单兼容库。在大多数情况下，不需要配置 HTML5 Shiv 或使用方法用 HTML5 Shiv 提供。

html5.elements option

The elements option is a space separated string or array, which describes the full list of the elements to shiv. see also addElements.

Configuring elements before html5shiv.js is included.

//create a global html5 options object
window.html5 = {
  'elements': 'mark section customelement' 
};

Configuring elements after html5shiv.js is included.

//change the html5shiv options object 
window.html5.elements = 'mark section customelement';
//and re-invoke the `shivDocument` method
html5.shivDocument(document);

html5.shivCSS

If shivCSS is set to true HTML5 Shiv will add basic styles (mostly display: block) to sectioning elements (like section, article). In most cases a webpage author should include those basic styles in his normal stylesheet to ensure older browser support (i.e. Firefox 3.6) without JavaScript.

The shivCSS is true by default and can be set false, only before html5shiv.js is included:

//create a global html5 options object
window.html5 = {
    'shivCSS': false
};

html5.shivMethods

If the shivMethods option is set to true (by default) HTML5 Shiv will override document.createElement/document.createDocumentFragment in Internet Explorer 6-8 to allow dynamic DOM creation of HTML5 elements.

Known issue: If an element is created using the overridden createElement method this element returns a document fragment as its parentNode, but should be normally null. If a script relies on this behavior, shivMethodsshould be set to false. Note: jQuery 1.7+ has implemented his own HTML5 DOM creation fix for Internet Explorer 6-8. If all your scripts (including Third party scripts) are using jQuery's manipulation and DOM creation methods, you might want to set this option to false.

Configuring shivMethods before html5shiv.js is included.

//create a global html5 options object
window.html5 = {
    'shivMethods': false
};

Configuring elements after html5shiv.js is included.

//change the html5shiv options object 
window.html5.shivMethods = false;

html5.addElements( newElements [, document] )

The html5.addElements method extends the list of elements to shiv. The newElements argument can be a whitespace separated list or an array.

//extend list of elements to shiv
html5.addElements('element content');

html5.createElement( nodeName [, document] )

The html5.createElement method creates a shived element, even if shivMethods is set to false.

var container = html5.createElement('div');
//container is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

html5.createDocumentFragment( [document] )

The html5.createDocumentFragment method creates a shived document fragment, even if shivMethods is set to false.

var fragment = html5.createDocumentFragment();
var container = document.createElement('div');
fragment.appendChild(container);
//fragment is shived so we can add HTML5 elements using `innerHTML`
container.innerHTML = '<section>This is a section</section>';

Github地址：https://github.com/aFarkas/html5shiv