使用方法
作者已经把这段代码放到了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, shivMethods
should 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