微软出的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. C#设计模式(5)——建造者模式（Builder Pattern）

    一.引言 在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成.例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象, ...

  2. 体验应用程序在Mac/iPhone/iPad之间的Handoff

    对于苹果新推出的Handoff功能,之前只体验了接电话的Handoff.一个电话打过来,iPhone/iPad/Mac同时响起,这时如果手上拿着东西在吃,就可以直接在Mac上接电话. 除此之外,还可以 ...

  3. CBA 赛程的笔记 - 北京首钢

    2014-11-01 19:35 北京首钢 103:89 广东宏远 结束 技术统计  发挥不错,打的比较好! 2014-11-05 19:35 八一双鹿 89:100 北京首钢 结束 技术统计  第一 ...

  4. 收缩SQL Server日志不是那么简单的（翻译）

    原文地址:http://rusanu.com/2012/07/27/how-to-shrink-the-sql-server-log/ 说明:本文为了更好的说明收缩的过程,在原文翻译的基础上增加了一些 ...

  5. javascript和C#比较

    C#和javascript有很多相似的地方,比如: 序列化 C#序列化 首先需要引用 using System.Web.Script.Serialization;//System.Web.Extens ...

  6. sql server创建备份计划

    对于备份计划,在sql server中微软提供了相应的功能集,通过Maintenance Plans向导可以对数据库进行相关维护工作. 通过下图的向导,可以进行如定期备份和清除工作. 前提是安装介质包 ...

  7. Atitit. 常用街机系统and 模拟器总结 snk neo geo cps mame sfc smc

    Atitit. 常用街机系统and 模拟器总结 snk neo geo cps mame sfc smc 1. #-------常用 游戏类型 1 2. 街机的历史 2 3. #=========== ...

  8. paip.提升效率--僵尸代码的迷思

    paip.提升效率--僵尸代码的迷思 僵尸代码是指你的代码库里被注释掉的那部分代码, 很少去使用它,就像僵尸一样, 看雷kill-the-zombies-in-your-code ========== ...

  9. Installing Oracle and ArcSDE on separate servers

    http://help.arcgis.com/en/arcgisdesktop/10.0/help/index.html#//002n0000000q000000

  10. samba权限之easy举例说明--原创

    实验环境RHEL5.0,samba3.023rc-2 一.何为browsealbe=no? 如图lingdao目录的权限为777 如图ling目录的共享设置和用户的ID和组 当用户lingdao_01 ...