讓IE8支持HTML5及canvas功能！

時間 2019-11-09

原文原文鏈接

微軟出的IE9支持HTML5，但由於不支持XP系統，暫時我還用不了。javascript

即便能用，現階段若是開發HTML5頁面，並考慮到兼容性問題的話，恐怕也得讓本身的界面支持IE6-8吧。css

首先，須要讓IE支持HTML5標籤。這個簡單，隨便在網上搜一下就能找到。下載一個html5.js，並拷貝到本身的目錄裏就能夠了。html

如今寫一段簡單代碼，其功能是在頁面上放置一個canvas，並畫一個紅色圓圈。html5

 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。java

第一步，咱們加上對html5的支持。css3

<!--[if IE]>
    <script src="/public/html5.js" type="text/javascript"></script>
<![endif]-->

如今再看，會出現一個黑漆漆的框框，說明IE8已經認識canvas標籤了。但紅圈圈仍是沒出來，下面狀態欄仍然提示咱們JS裏壓根沒取到canvas。這說明IE還只是認識了canvas是個合法標籤而已，至於怎麼處理它，對不起，俺還不會。canvas

第二步，加上對canvas的支持。svn

下載excanvas_r3.zip，解壓後，把excanvas.compiled.js拷貝到本身的目錄裏，引用它。如今看看，哈，一個紅色圈圈出現了！js works！fetch

<!--[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特性，網站說的很清楚，我就不費口舌了。

最後，在咱們下載了三個文件，增長了三句話以後，看看效果吧。嘻嘻！