改變網頁的兼容性模式
阿新 • • 發佈:2018-10-07
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標頭,情狀有變
改變網頁的兼容性模式