首页前端开发HTML用html5shiv.js解决ie低版本浏览器支持html5标签

用html5shiv.js解决ie低版本浏览器支持html5标签

时间2024-01-26 20:05:03发布访客分类HTML浏览153
导读:收集整理的这篇文章主要介绍了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/,上面有详细的说明。

.art{ width:100px; height:100px; border:1px solid Red; } .art{ width:100px; height:100px; border:1px solid Red; }

用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/,上面有详细的说明。

.art{ width:100px; height:100px; border:1px solid Red; } .art{ width:100px; height:100px; border:1px solid Red; }

觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

ClassCSSdivHTMLpost-format-gallery

若转载请注明出处: 用html5shiv.js解决ie低版本浏览器支持html5标签
本文地址: https://pptw.com/jishu/587217.html
h5第三课列表 20170319HTML5表格常用属性

游客 回复需填写必要信息