让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)


Posted in HTML / CSS onApril 08, 2014

如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多,其中自己生成标签元素就是一种。

基本原理参见如下代码在IE8中效果,样式根本没有起作用。

复制代码
代码如下:

<html>
<head>
<style>mxria{ color: red; }</style>
</head>
<body>
<mxria>Hello!</mxria>
</body>
</html>

让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)

为了是浏览器识别<mxria></mxria>标签并显示对应样式的效果,我们可以如下增加一段js,看到效果就不同了

复制代码
代码如下:

<html>
<head>
<style> mxria{ color: red; }</style>
<script>document.createElement("mxria")</script>
</head>
<body>
<mxria>Hello!mxria.com</mxria>
</body>
</html>

让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)

现在大家明白了其中的奥妙吧!对,就是document.createElement  ,HTML5 shiv就是这样一个js插件,将所有HTML5的标签进行了重新生成,你需要加载该插件,那么HTML5程序就能被所有浏览器识别了。
下载地址:http://html5shim.googlecode.com/svn/trunk/html5.js

trunk/html5.js简单使用方法:

下面是引用Google的html5.js文件:

html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

复制代码
代码如下:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

当然,你也可以把代码拿出来自己看着办:

(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
最后在css里面加上这段:

/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。

好了,简单吧,一句话概括就是:引用html5.js  使html5标签成块状

HTML / CSS 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
为你的html5网页添加音效示例
Apr 03 #HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 #HTML / CSS
简单html5代码获取地理位置
Mar 31 #HTML / CSS
HTML5注册页面示例代码
Mar 27 #HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
You might like
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jQuery知识点整理
2015/01/30 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
js正则相关知识点专题
2018/05/10 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
详解Python 最短匹配模式
2020/07/29 Python
Python字典dict常用方法函数实例
2020/11/09 Python
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
运动会广播稿60字
2014/01/15 职场文书
公司面试感谢信
2014/02/01 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
教师演讲稿开场白
2014/08/25 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS