1.前言,。
ie6,7,8支持html5,，看起來比較難，其實(shí)有一種方法很通用,，就是引入js和css,這種可插拔的引入對(duì)開發(fā)很有幫助,。比如,下面是一個(gè)讓網(wǎng)頁支持canvas和css3的例子,。
2.例子。
下面是一個(gè)在canvas畫布中顯示一個(gè)紅球的例子的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>
這個(gè)例子在ie8不能運(yùn)行,，火狐可以,。如果要它能在ie6,7,8能運(yùn)行，那么需要做兩件事情,。
2.1增加一個(gè)html5的ie輔助js文件和一個(gè)canvas兼容js文件
這個(gè)文件可命名為html5.js,這是一個(gè)開源的js文件,，可以放心使用，它主要是解決了了6,7,8兼容html5的js的問題,。canvas兼容文件命名為excanvas.compiled.js,，所有文件我已經(jīng)打包在demo里面?？梢韵螺d,。
2.2.增加一個(gè)css文件和在頁面進(jìn)行引用。
css文件命名為ie-css3.htc,，它解決了ie6,7,8,兼容css3的問題,。
3.demo下載。
見附件,。
4.例子運(yùn)行結(jié)果
見下面這張圖片,。是一個(gè)紅色的圓圈，顯示在黑色的畫布上面,。
5.總結(jié)
ie6,7,8 兼容其他html5技術(shù)的做法,，其實(shí)都可以效仿引用js和css的做法。這樣,，便為html5在移動(dòng)端馳騁,，掃清了最后一絲障礙。
|
