微软出的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. 《The Book of CSS3》学习笔记

    一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...

  2. Kali Linux Web 渗透测试— 第十二课-websploit

    Kali Linux Web 渗透测试— 第十二课-websploit 文/玄魂 目录 Kali Linux Web 渗透测试— 第十二课-websploit..................... ...

  3. 字符串匹配算法之SimHash算法

    SimHash算法 由于实验室和互联网基本没啥关系,也就从来没有关注过数据挖掘相关的东西.在实际工作中,第一次接触到匹配和聚类等工作,虽然用一些简单的匹配算法可以做小数据的聚类,但数据量达到一定的时候 ...

  4. 我所常用的ajax调用格式

    ajax: $.ajax({    type: "post",    datatype: "json",    contentType: "appli ...

  5. Java-基础练习3

    1.编写一个Java程序,计算半径为3.0的圆周长和面积并输出结果.把圆周率π定义为常量,半径定义为变量,然后进行计算并输出结果. package com.java; public class zm ...

  6. C语言实现二叉树

    二叉树的重要性就不用多说啦: 我以前也学习过,但是一直没有总结: 网上找到的例子,要么是理论一大堆,然后是伪代码实现: 要么是复杂的代码,没有什么解释: 最终,还是靠FQ找到一些好的文章,参考地址我会 ...

  7. hdu 1864 01背包 最大报销额

    http://acm.hdu.edu.cn/showproblem.php?pid=1864 New~ 欢迎“热爱编程”的高考少年——报考杭州电子科技大学计算机学院关于2015年杭电ACM暑期集训队的 ...

  8. 通过Ruby On Rails 框架来更好的理解MVC框架

    通过Ruby On Rails 框架来更好的理解MVC框架   1.背景    因为我在学习软件工程课程的时候,对于 MVC 框架理解不太深入,只是在理论层面上掌握,但是不知道如何在开发中使用 MVC ...

  9. C++Builder及VC的库相互调用

    coff2omf  vc.lib  bc.lib implib -f xxx.lib xxx.dll dll文件为VC编译的动态库lib文件为你需要转换的c++ builder 使用的静态库. 这也是 ...

  10. iptables防火墙原理详解

    1. netfilter与iptables Netfilter是由Rusty Russell提出的Linux 2.4内核防火墙框架,该框架既简洁又灵活,可实现安全策略应用中的许多功能,如数据包过滤.数 ...