让IE8支持HTML5及canvas功能！
微软出的IE9支持HTML5，但因为不支持XP系统，暂时我还用不了。
即使能用，现阶段如果开发HTML5页面，并考虑到兼容性问题的话，恐怕也得让自己的界面支持IE6-8吧。
首先，需要让IE支持HTML5标签。这个简单，随便在网上搜一下就能找到。下载一个html5.js，并拷贝到自己的目录里就可以了。
现在写一段简单代码，其功能是在页面上放置一个canvas，并画一个红色圆圈。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> IE8支持HTML5+CSS3 </TITLE>
5 <head>
6
7 <style type="text/css">
8 body {
9 background: #444;
10 color: #FFF;
11 font-family: Helvetica, Arial, sans-serif;
12 text-align: center;
13 }
14
15 #cv {
16 width: 600px; height: 400px;
17 background: #000;
18 border-radius: 20px;
19 padding: 20px;
20 margin: 20px auto;
21 box-shadow: 0 0 40px #222;
22 }
23 </style>
24
25 <script type="text/javascript">
26 function test() {
27 var ctx = document.getElementById("cv").getContext("2d");
28
29 ctx.fillStyle = "#aa0000";
30 ctx.beginPath();
31 ctx.arc(100, 100, 25, 0, Math.PI*2, true);
32 ctx.closePath();
33 ctx.fill();
34 }
35
36 window.onload = test;
37 </script>
38
39 </head>
40
41 <body>
42 <canvas id="cv"></canvas>
43 </body>
段代码，在遨游和Firefox上，都可以用。但在IE8里，不但什么都没有，下面状态栏里还会显示黄色小叹号，点开，告诉我们，ctx根本没取到canvas。
第一步，我们加上对html5的支持。
<!--[if IE]>
<script src="/public/html5.js" type="text/javascript"></script>
<![endif]-->
现在再看，会出现一个黑漆漆的框框，说明IE8已经认识canvas标签了。但红圈圈还是没出来，下面状态栏仍然提示我们JS里压根没取到canvas。这说明IE还只是认识了canvas是个合法标签而已，至于怎么处理它，对不起，俺还不会。
第二步，加上对canvas的支持。
下载excanvas_r3.zip，解压后，把excanvas.compiled.js拷贝到自己的目录里，引用它。现在看看，哈，一个红色圈圈出现了！js works！
<!--[if IE]>
<script type="text/javascript" src="/public/html5.js"></script>
<script type="text/javascript" src="/public/excanvas.compiled.js"></script>
<![endif]-->
如果您足够细心，您会发现，样式表中存在这么两行：
border-radius: 20px;
box-shadow: 0 0 40px #222;
这是CSS3的样式哦！border-radius说明我们要的黑框框四周应该是圆角才对，但现在却四愣八插的；box-shadow那儿还有shadow呢。。。
下面是第三步，让IE支持CSS3。在cv选择器的最后，增加一句话
behavior: url(/public/ie-css3.htc);
#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);
}
其中，ie-css3.htc去 http://fetchak.com/ie-css3/ 下载，具体它能够支持多少CSS3特性，网站说的很清楚，我就不费口舌了。
最后，在我们下载了三个文件，增加了三句话之后，看看效果吧。嘻嘻！
让IE8支持HTML5及canvas功能！的更多相关文章
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- 让IE6/IE7/IE8支持HTML5标签的js代码
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- IE8支持HTML5的占位符placeholder
/*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...
- html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧
插件介绍 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题.所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,那么这款html5shiv.js是一 ...
- 让IE系列支持HTML5的html5shiv.js和respond.min.js
HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...
- HTML5之Canvas画布
先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...
- Web开发者应当开始学习HTML5的新功能
据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...
- ie8下面版本号（包含ie8）的浏览器不支持html5标签属性解决方式（Modernizr 2.6.2插件的使用）
我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...
随机推荐
- BugTracker 功能说明（有图有真相）
一.简单介绍 BugTracker是基于Asp.Net,C#, SqlServer的一个web端Bug管理系统.发布在IIS上.能够对不同项目,不同组织,不同人员的bug进行管理和更新设计优先级和用户 ...
- [自制简单操作系统] 7、多任务（二）——任务管理自动化&任务休眠
前言 >_<" 这里仿照窗口管理的方式将任务管理也修改成相应的管理模式,这样可以灵活的添加多个任务,而不必每次都要修改任务切换函数:此外还在任务休眠做了尝试,通过将任务挂起和唤醒 ...
- autohotkey在运维中的应用
AutoHotkey是一个自由.开源的宏生成器和自动化软件工具,它让用户能够自动执行重复性任务.AutoHotkey可以修改任何应用程序的用户界面(例如,把默认的Windows按键控制命令替 ...
- 使用grunt打包ueditor源代码
支持版本支持 UEditor 1.3.0+ 的版本 使用方法1.线上下载ueditor下载地址:ueditor,要下载"完整版 + 源码" 2.安装nodejs下载nodejs并安 ...
- 近期code review几处小问题集锦
1 线程池使用不当 我们的调度系统需要将一堆会员分配给相应的人员来处理,流程如以下伪代码所示: public void dispatch() { while (true) { List<Memb ...
- Linux安装snmp
1.yum安装 yum -y install net-snmp* 2.修改配置文件/etc/snmp/snmpd.conf com2sec notConfigUser default public 默 ...
- 更新日志 - BugHD 与你的应用一起成长
上周 BugHD Android客户端上线了,下载地址在此,欢迎大家体验并提出反馈.本周增加 BugHD 和 fir.im 的新功能,同时也做出一些体验优化. BugHD 新增功能 1.新增安装量.启 ...
- 使用Excel制作万年历(可打印)
先来看看A4纸打印效果,其他功能后续继续完善中. 年份数据字典(农历节日) 农历节日表 年度 春节 元宵节 龙抬头 端午节 六月六 七月七 七月十五 仲秋节 除夕 2010年02月14日 2010年0 ...
- 【CUDA学习】GPU硬件结构
GPU的硬件结构,也不是具体的硬件结构,就是与CUDA相关的几个概念:thread,block,grid,warp,sp,sm. sp: 最基本的处理单元,streaming processor 最 ...
- 实用的ajaxfileupload插件
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...