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

Posted 2020-08-04

使用方法

作者已经把这段代码放到了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 overridedocument.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 ifshivMethods 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

本文系作者 问说网 授权问说网发表，并经问说网编辑，转载请注明出处和 本文链接。

本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动。
转载请注明：文章转载自：问说网 » html5shiv让IE也能支持HTML5标签的JavaScript兼容库
本文标题：html5shiv让IE也能支持HTML5标签的JavaScript兼容库
本文地址：http://www.uedsc.com/use-html5-for-ie.html