使ie9以下版本支持canvas,css3等主流html5技术的方法
ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在canvas画布中显示一个红球的例子的html.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> fewfwe</TITLE>
- <head>
- <style type="text/css">
- body {
- background: #444;
- color: #FFF;
- font-family: Helvetica, Arial, sans-serif;
- text-align: center;
- }
- #cv {
- width: 600px; height: 400px;
- background: #000;
- border-radius: 20px;
- padding: 20px;
- margin: 20px auto;
- box-shadow: 0 0 40px #222;
- behavior: url(public/ie-css3.htc);
- }
- </style>
- <script type="text/javascript">
- function test() {
- var ctx = document.getElementById("cv").getContext("2d");
- ctx.fillStyle = "#aa0000";
- ctx.beginPath();
- ctx.arc(100, 100, 25, 0, Math.PI*2, true);
- ctx.closePath();
- ctx.fill();
- }
- window.onload = test;
- </script>
- </head>
- <body>
- <!--[if IE]>
- <script src="public/html5.js" type="text/javascript"></script>
- <script type="text/javascript" src="public/excanvas.compiled.js"></script>
- <![endif]-->
- <canvas id="cv"></canvas>
- </body>
这个例子在ie8不能运行,火狐可以。如果要它能在ie6,7,8能运行,那么需要做两件事情。
2.1增加一个html5的ie辅助js文件和一个canvas兼容js文件
这个文件可命名为html5.js,这是一个开源的js文件,可以放心使用,它主要是解决了了6,7,8兼容html5的js的问题。canvas兼容文件命名为excanvas.compiled.js,所有文件我已经打包在demo里面。可以下载。
2.2.增加一个css文件和在页面进行引用。
css文件命名为ie-css3.htc,它解决了ie6,7,8,兼容css3的问题。
3.demo下载。
见附件。
4.例子运行结果
见下面这张图片。是一个红色的圆圈,显示在黑色的画布上面。
5.总结
ie6,7,8 兼容其他html5技术的做法,其实都可以效仿引用js和css的做法。这样,便为html5在移动端驰骋,扫清了最后一丝障碍。
- Test21.rar (13.6 KB)
使ie9以下版本支持canvas,css3等主流html5技术的方法的更多相关文章
- 让ie9之前的版本支持canvas
原来google的研发人员早就帮我们解决了这问题. 在这里我们得首先感谢google 在这链接http://excanvas.sourceforge.net/ 下载下来后 吧excanvas.js引入 ...
- 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5
HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...
- 转:让ie6-8支持部分css3样式的方案
我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...
- 现在有哪些浏览器的哪些版本支持 HTML5
现在有哪些浏览器的哪些版本支持 HTML5 1.IE IE9支持部分 IE10+支持2.Firefox Firefox3.5,3.6支持大部分 Firefox4.0+支持3.Chrome Chrome ...
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)
如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...
- 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...
随机推荐
- Oracle 之 常用函数
SQL语句根据参数的不同,分为单行函数 和 多行函数. [1] 单行函数:输入是一行,输出也是一行: [2] 多行函数:输入多行数据,输出一个结果. 在执行时,单行函数是检索一行处理一次,而多行函数是 ...
- Vijos P1002 过河 (NOIP提高组2005)
链接:https://www.vijos.org/p/1002 解析: 若 p*x+(p+1)*y=Q(採用跳跃距离p和p+1时能够跳至不论什么位置Q),则在Q ≥ P*(P-1)时是一定有解的. 因 ...
- 移动端项目中 @2x 图 和 @3x 图 的使用
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片.通过@media (媒体查询),判断设备的dpr. @mixin ...
- Openerp 中打开 URL 的三种 方法
来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...
- 关于RHEL6下桥网配置的写法(ifcfg-eth0,ifcfg-br0) / 在阿里云的CentOS上安装docker
Posted on 2011-07-28 16:46 zhousir1991 阅读(1978) 评论(0) 编辑 收藏 以下仅仅是我在做练习的时候下的环境,参照写即可: [root@desktop2 ...
- 具有SSM框架的CRUD与多条件查询
概述 居于ssm版本的crud跟多添加查询, 并带分页的demo 详细 代码下载:http://www.demodashi.com/demo/13653.html 一.功能展示 部门CRUD: 员工C ...
- AI:人工智能搜索策略
人工智能搜索策略:
- 使用vs调试.net源代码
使用.NET Framework库参考源进行调试 您可能会想知道使用.NET Framework参考源的调试方式.在下面的示例中,您将看到一个我调用公用Console.WriteLine方法的工具.从 ...
- ASIHTTPRequest 简单使用
ASIHTTPResquest 框架功能强大,应用非常多. 曾经写过ASIHTTPResquest的导入,如今就看一下基本使用 记一下当中基础的操作: 1.发送同步请求: NSURL * url = ...
- 用Reflector for .NET反编译dll文件(.net),把整个dll导出个cs插件
Reflector for .NET 下载地址: http://www.aisto.com/roeder/dotnet/ Reflector.FileDisassembler.zip下载地址: htt ...