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