改變網頁的兼容性模式

時間 2019-11-29

原文原文鏈接

前言html

做爲2017年來的前端，去完成一個兼容於IE9如下的網站，這是很燒腦的活，甚至都完成不了，基於能力有限的話，所作的網站只能由IE9以上才能正確瀏覽，不然的話，bug一大推。爲了網站能更正常點，我不得不給網站一個瀏覽限制（只容許IE9以上）前端

方案canvas

一、瀏覽器

條件解釋，也可將if判斷，主要針對IE兼容性，根據IE版本而判斷，從而執行某一段HTML代碼。安全

若要設置網站只限制IE9以上瀏覽，不然就顯示出「瀏覽器過期，請升級」的內容，換成數學命題=>if 小於或等於 IE9，執行html代碼。網站

<!DOCTYPE html>
 <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>指示兼容性模式</title>
       <style>#emulate{background-color:red;}</style>
    </head>
    <body>
        <!--[if lte IE 9]>
           <div class="lte-ie9">
              <p>
                 IE9如下（包括IE9）的的瀏覽器不支持canvas標籤
              </p>
           </div>
           <style>
              .lte-ie9{
                 position:absolute;
                 top:0;left:0;right:0;bottom:0;
                 z-index:1000;
                 padding:100px;
                 background:#333;
                 color:#999;
                 font-size:35px;
                 text-align:center;
              }
              #emulate{display:none;}
           </style>
        <[endif]-->
    	<canvas id="emulate"></canvas>
    	<script>
    	   var canvas=document.getElementById("emulate");
    	   var ctx=canvas.getContext("2d");
    	   ctx.font="35px georgia";
    	   ctx.fillStyle="pink";
    	   ctx.fillText("兼容性模式",10,40);
    	</script>
    </body>
 </html>

瀏覽頁面，我用360安全瀏覽器運行，該瀏覽器在IE7~11瀏覽很方便，點擊閃電圖標，進入兼容模式查看效果。ui

IE9以上spa

IE9如下（包括IE9）htm

二、其實只要在head標籤中加一行<meta http-equiv="X-UA-Compatible" content="IE=edge">就能夠解決了，它的做用是使頁面以瀏覽器最高兼容性運行，就算菜單選項點了IE七、IE八、IE9並運行，實際情狀是以IE11運行。關於content的值請耐心去網上學。blog

學過HTML5的童鞋應該知道，IE9如下（包括IE9）不支持HTML5，這不，接下來的案例就關係到HTML5，是關於繪畫的知識:<canvas>。

 <!DOCTYPE html>
 <html>
    <head>
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>指示兼容性模式</title>
       <style>#emulate{background-color:red;}</style>
    </head>
    <body>
    	<canvas id="emulate"></canvas>
    	<script>
    	   var canvas=document.getElementById("emulate");
    	   var ctx=canvas.getContext("2d");
    	   ctx.font="35px georgia";
    	   ctx.fillStyle="pink";
    	   ctx.fillText("兼容性模式",10,40);
    	</script>
    </body>
 </html>

IE9以上（不包括IE9），canvas標籤有效果

IE9如下（包括IE9），按正常來說，頁面應該是什麼都沒有，引入了http-equivalent爲X-UA-Compatible的meta標頭，情狀有變