让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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 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
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
简单谈谈python的反射机制
2016/06/28 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python实现月食效果实例代码
2019/06/18 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
三个python爬虫项目实例代码
2019/12/28 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
应征英语教师求职信
2013/11/27 职场文书
自荐信需注意事项
2014/01/25 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
如何才能写好调研报告?
2019/07/03 职场文书