html5教程-用html5shiv.js解决ie低版本浏览器支持html5标签
脚本宝典收集整理的这篇文章主要介绍了html5教程-用html5shiv.js解决ie低版本浏览器支持html5标签，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
用html5shiv.js解决ie低版本浏览器支持html5标签。众所周知，IE8及其以下的IE低版本浏览器是不支持html5标签的，更无奈的是IE9虽然支持了部分html5标签，但是对系统做了严格限制，那就是xp系统是无法装IE9的，这就把IE8、IE7这些低版本浏览器的死期更xp系统的死期狠狠地绑在了一起。微软的同志们下定了决心要干掉xp系统，无奈xp系统根深蒂结，一时无法连根拔起，就给了个几年的期限，而这期限只是停止更新，就算到了那时，谁也不能保证广大老年人是否愿意挪动一下身体去更新换代呢。用户就是上帝，你可以有你的选择，但上帝不会再眷恋着你。
实现原理：每个浏览器有一个它本身所认识的标签的列表，那么不在这个列表里面的标签我们称之为该浏览器的不可识别标签。对于ie低版本浏览器来言，html5的标签就是它的不可识别标签，在未做任何处理的情况下，这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。有人研究发现，当我们通过js的createElement方法去建立这些标签时，这些标签就可以被ie低版本浏览器识别。个人猜测应该是这些浏览器的javascript编译解析引擎在新建这些元素时，若发现他们不在可识别的列表当中就赋予它们一些默认的属性，然后添加到列表当中去。而这些默认的属性又是什么呢。下面我稍微试验一下。
<strong><!doctype html /> <html> <head> <title>html5标签支持测试</title> </head> <body> <article class="art">我一个文章标签</article> </body> </html></strong>
由于仅仅是一个标签加文字，不出意料各浏览器都正常显示着文字。
下面我加点样式作料看看。
<strong><!doctype html /> <html> <head> <title>html5标签支持测试</title> <style type="text/css"> .art{ width:100px; height:100px; border:1px solid Red; } </style> </head> <body> <article class="art">我一个文章标签</article> </body> </html></strong> 有了美丽的样式的修饰，Chrome,FireFox,Opera,Safari(新版)都出现了美美的绣边，而且体型还挺方正的呢。而IE8和IE7却依然如故。
由于IE8和IE7天生不能穿article这种美丽的衣服，于是玉皇大帝叫织女(document.createElement("article");)给他们织一件同样材质的衣服。
我一个文章标签
这时，IE8和IE7已经出现了红边，但是只是简单的把布料搭在身上而已，体型依旧没有出来。
原来javascript把article放出来的时候给它的默认display的属性是：inline,所以高宽固然不起作用了。没有办法，玉皇大帝决定再让织女把这些布料按样式织(display:block;)成衣服。如下
.art{ width:100px; height:100px; border:1px solid Red; display:block;} 我一个文章标签
有了织女的帮助，IE8和IE7终于变得一样美了。
那么应用实际项目中，我们可以找出html5的元素用上面的方法进行构建和定义样式来使得IE的低版本浏览器支持它们，另外我们也可以直接用网上的开源框架。
源码地址：https://github.com/aFarkas/html5shiv
使用如下(使用注释标签避免已经支持的浏览器下载该文件)
<!--[if lte IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
当然，我们也可以把js拷到本地，使用本地链接。
上面所说的主要是html5中的普通标签，那么对于video和audio标签呢，网上也有开源的解决方案了。百度一下html5media，或者直接访问官网：https://html5media.info/，上面有详细的说明。
用html5shiv.js解决ie低版本浏览器支持html5标签。众所周知，IE8及其以下的IE低版本浏览器是不支持html5标签的，更无奈的是IE9虽然支持了部分html5标签，但是对系统做了严格限制，那就是xp系统是无法装IE9的，这就把IE8、IE7这些低版本浏览器的死期更xp系统的死期狠狠地绑在了一起。微软的同志们下定了决心要干掉xp系统，无奈xp系统根深蒂结，一时无法连根拔起，就给了个几年的期限，而这期限只是停止更新，就算到了那时，谁也不能保证广大老年人是否愿意挪动一下身体去更新换代呢。用户就是上帝，你可以有你的选择，但上帝不会再眷恋着你。
实现原理：每个浏览器有一个它本身所认识的标签的列表，那么不在这个列表里面的标签我们称之为该浏览器的不可识别标签。对于ie低版本浏览器来言，html5的标签就是它的不可识别标签，在未做任何处理的情况下，这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。有人研究发现，当我们通过js的createElement方法去建立这些标签时，这些标签就可以被ie低版本浏览器识别。个人猜测应该是这些浏览器的javascript编译解析引擎在新建这些元素时，若发现他们不在可识别的列表当中就赋予它们一些默认的属性，然后添加到列表当中去。而这些默认的属性又是什么呢。下面我稍微试验一下。
<strong><!doctype html /> <html> <head> <title>html5标签支持测试</title> </head> <body> <article class="art">我一个文章标签</article> </body> </html></strong>
由于仅仅是一个标签加文字，不出意料各浏览器都正常显示着文字。
下面我加点样式作料看看。
<strong><!doctype html /> <html> <head> <title>html5标签支持测试</title> <style type="text/css"> .art{ width:100px; height:100px; border:1px solid Red; } </style> </head> <body> <article class="art">我一个文章标签</article> </body> </html></strong> 有了美丽的样式的修饰，Chrome,FireFox,Opera,Safari(新版)都出现了美美的绣边，而且体型还挺方正的呢。而IE8和IE7却依然如故。
由于IE8和IE7天生不能穿article这种美丽的衣服，于是玉皇大帝叫织女(document.createElement("article");)给他们织一件同样材质的衣服。
我一个文章标签
这时，IE8和IE7已经出现了红边，但是只是简单的把布料搭在身上而已，体型依旧没有出来。
原来javascript把article放出来的时候给它的默认display的属性是：inline,所以高宽固然不起作用了。没有办法，玉皇大帝决定再让织女把这些布料按样式织(display:block;)成衣服。如下
.art{ width:100px; height:100px; border:1px solid Red; display:block;} 我一个文章标签
有了织女的帮助，IE8和IE7终于变得一样美了。
那么应用实际项目中，我们可以找出html5的元素用上面的方法进行构建和定义样式来使得IE的低版本浏览器支持它们，另外我们也可以直接用网上的开源框架。
源码地址：https://github.com/aFarkas/html5shiv
使用如下(使用注释标签避免已经支持的浏览器下载该文件)
<!--[if lte IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
当然，我们也可以把js拷到本地，使用本地链接。
上面所说的主要是html5中的普通标签，那么对于video和audio标签呢，网上也有开源的解决方案了。百度一下html5media，或者直接访问官网：https://html5media.info/，上面有详细的说明。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-用html5shiv.js解决ie低版本浏览器支持html5标签全部内容，希望文章能够帮你解决html5教程-用html5shiv.js解决ie低版本浏览器支持html5标签所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10