理解和使用html5shiv

来源：互联网发布：mac无法抹掉u盘编辑：程序博客网时间：2024/06/14 06:18

理解html5shiv

The HTML5 Shiv enables use of html5 sectioning elements in legacy Internet Explorer and provides basic Html5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
—— GitHub aFarkas/html5shiv

html5shiv有什么用？

html5shiv使得传统浏览器支持部分HTML5元素并提供相应的基本样式。传统浏览器，即主流浏览器的低版本，包括IE6-9、Safari4.x和Firefox 3.x等。

html5shiv怎么用？

下载html5shiv，在html文档的head标签里引入链接。
注意：引入的文件路径要正确

<!DOCTYPE html><html><head>  <meta charset="utf-8">    <title></title>    <!-- 在这里引入html5shiv -->    <!--[if lt IE 9]>    <script src="html5shiv.min.js"></script>  <![endif]--></head><body>    <header>        <h1>如何使用html5shiv</h1>        <p>引入html5shiv后就可以愉快地让IE6-9支持html5新元素了！</p>    </header></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

html5shiv支持哪些html5元素？

目前最版本为3.7.3，默认支持

abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video

html5shiv并不能让传统低版本浏览器正常实现html5元素所有功能，而是对不支持html5元素，如video和audio等，当成相应的成块状或行内元素进行显示，并可以为html5元素添加样式。

可以通过JavaScript定制需要支持的html5元素，如通过在head中并且在引入html5shiv之前插入以下代码

<!--[if lt IE 9]><script>  window.html5 = {  'elements': 'abbr article custom elements',  'shivCSS': true,  'shivMethods': true  };</script><script src="html5shiv.min.js"></script><![endif]-->1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

其中elements的属性值是html5元素标签，可以是由空格分隔的字符串或数组；shivCSS的属性类型为Boolean，默认为true，给html5元素添加CSS样式；shivMethods的属性类型为Boolean，默认为true，覆盖createElement和createDocumentFragment方法。

注意：

定制的html5元素会覆盖默认元素，所以elements的属性值要包含文档中出现的所有html5元素。
shivCSS主要为块状元素添加dispaly:block。若shivCSS: false，默认所有元素按照行内元素显示。
当使用第三方库或框架，如Jquery 1.7+，已经解决为IE6等浏览器动态创建元素，无需重写createElemnt方法，所以 shivMethods可以设置为false

article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section {    display:block}mark {background:#FF0;color:#000}template{display:none}1
2
3
4
5
1
2
3
4
5

不用html5shiv解决问题

有时，页面中只需用到section header footer article等少数几个html5语义化元素。能不能不通过html5shiv，自己写javascript实现低版本浏览器支持这些元素呢？

其实很简单，把下面的代码嵌入到head中。

<!--[if lt IE 9]>  <script>   ;(function(){     var elements = ['section','header','footer','article'];     var i;     for(i in elements){       document.createElement(elements[i]);     }   })();  </script><![endif]-->1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

再对html5元素添加相应样式

<style>  section, header, footer, article {display: block}</style>1
2
3
1
2
3

这样IE6-8就能正确识别上述几个html5元素并为之添加样式了。

深入html5shiv

html5shiv可以说是解决html5兼容问题的一个小框架。阅读并html5shiv源代码有助于理解html5shiv的工作原理，并学会自己开发一套符合工作需要的html5框架来支持html5。

框架学习方法

阅读框架源代码需要精通JavaScript。若对JavaScript的语法有基本了解，也可以从以下几点对源代码进行粗略分析：

JavaScript模块化。知识点：封装、接口、规范。
健壮性。处理异常的能力，代码覆盖所有分支，便于测试。
注释。每一个变量，每一个函数都有美而小的注释。
代码组织结构。变量->函数->接口，这样结构清晰明了。
浏览器检测。前端经常遇到检测浏览器兼容问题，看看html5shiv是如何检测浏览器是否兼容html5的。

阅读全文

0 0