改变网页的兼容性模式

时间 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标头，情状有变