让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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
Python实现完整的事务操作示例
2017/06/20 Python
django的登录注册系统的示例代码
2018/05/14 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
初一体育教学反思
2014/01/29 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
辞职信怎么写
2015/02/27 职场文书
百万英镑观后感
2015/06/09 职场文书