讓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特性，網站說的很清楚，我就不費口舌了。
最後，在我們下載了三個文件，增加了三句話之後，看看效果吧。嘻嘻！
