微软出的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功能！的更多相关文章

  1. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  2. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  3. 让IE6/IE7/IE8支持HTML5标签的js代码

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  4. IE8支持HTML5的占位符placeholder

    /*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...

  5. html5shiv.js让吃屎的IE6、IE7、IE8支持html5去吧

    插件介绍 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题.所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,那么这款html5shiv.js是一 ...

  6. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  7. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

  8. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  9. ie8下面版本号（包含ie8）的浏览器不支持html5标签属性解决方式（Modernizr 2.6.2插件的使用）

    我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...

随机推荐

  1. WPF学习开发客户端软件-任务助手(已上传源码)

    本人纯属WPF新手,布局和WPF的开发水平相当欠缺,从个人来说,还是比较喜欢WPF的,有人说WPF是界面加上WINFORM,我不这样认为,WPF与WINFORM主要的不同在于数据绑定.   这个软件虽 ...

  2. (转载)Autodesk面试技术题解答

    Autodesk面试技术题解答 By SmartPtr(http://www.cppblog.com/SmartPtr/)          近一年以来,AUTODESK的面试题在网上是闹的沸沸扬扬, ...

  3. 基于 IdentityServer3 实现 OAuth 2.0 授权服务【密码模式(Resource Owner Password Credentials)】

    密码模式(Resource Owner Password Credentials Grant)中,用户向客户端提供自己的用户名和密码.客户端使用这些信息,向"服务商提供商"索要授权 ...

  4. C#像运行一个exe 程序一样运行一个dll文件

    [DllImport("kernel32.dll")] public static extern int WinExec(string exeName, int operType) ...

  5. [游戏学习24] MFC 各种绘图 字体学习

    >_<:这里包含字体设置及各种绘图,只要稍微看一下代码就能理解,这里不多介绍 >_<:Hello.h #include<afxwin.h> class CMyApp ...

  6. C# 两行代码实现 延迟加载的单例模式（线程安全）

    关键代码第4,5行. 很简单的原理不解释:readonly + Lazy(.Net 4.0 + 的新特性) public class LazySingleton { //Lazy singleton ...

  7. paip.python ide 总结最佳实践o4.

    paip.python ide 总结最佳实践o4. ====2个重要的标准 1.可以自动补全 2.可以断点调试 =======选型使用报告 Komodo正好儿俄机器上有,使用累挂,自动补全还凑火.就是 ...

  8. 啊哈C！思考快你一步——用编程轻松提升逻辑力

    啊哈C!思考快你一步——用编程轻松提升逻辑力(双色)(每个人都应该学习如何编程,因为它教会你如何思考.——史蒂夫.乔布斯) 啊哈磊著 ISBN 978-7-121-21336-6 2013年9月出版 ...

  9. javaweb学习总结(十九)——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  10. Leetcode 225 Implement Stack using Queues STL

    用两个队列去实现栈,这里我使用了队列数组q[2],在所有的过程中保证一个队列是空的 push时插入到空的队列中,然后将队列中的元素移到另一个队列中 pop时从不空的队列中pop() peek时从不空的 ...