1. 程式人生 > >改變網頁的兼容性模式

改變網頁的兼容性模式

http left 解決 back val 畫的 char end 接下來

前言

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

方案

1、<!--[if IE]>正常HTML代碼<[endif]-->

條件解釋,也可將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瀏覽很方便,點擊閃電圖標,進入兼容模式查看效果。

技術分享圖片

IE9以上

技術分享圖片

IE9以下(包括IE9)

技術分享圖片

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

學過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標頭,情狀有變

技術分享圖片

改變網頁的兼容性模式