让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 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
详解flex:1什么意思
Jul 23 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的历史和优缺点
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
导游词之日本富士山
2020/01/06 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python