html5shiv讓IE也能支持HTML5標籤的JavaScript兼容庫

使用方法

做者已經把這段代碼放到了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