IE常见的兼容处理

时间 2019-12-11

标签常见的兼容处理繁體版

原文原文链接

IE常见的兼容处理

　　1. 禁用IE兼容模式css

　　　　为了保证IE可以使用最新渲染模式而不是兼容模式，在html文档头部应加入如下代码：html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  ...

　　2. 提示IE7及更早版本的用户html5

　　　针对IE7及更早的版本，应该给出提示，让用户升级浏览器。在body以后加入如下代码能够有选择性的出现浏览器升级提示，并给出连接引导用户访问browsehappy.com：css3

<body>
  <!--[if lt IE 8]>
    <div class="alert alert-danger">您正在使用 <strong>过期的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提高用户体验.</div>
  <![endif]-->
  ...

　　　　若是你准备支持的IE浏览器最低版本为IE9，也建议为早期用户准备一个提示，只须要将以上代码中的 [if lt IE 8] 更改成 [if lt IE 9]。web

　　3. IE8用户　（须要的文件能够本身百度到）　　canvas

　　　　由于IE8及早期版本不支持HTML5标签，因此针对IE8浏览器，咱们引入html5shiv来使得HTML5标签在IE8中也能使用。在HTML文档的script区域加入如下代码：浏览器

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

　　　　由于IE8及早期版本一样不支持media query来实现响应式布局，咱们一样能够经过条件注释引入respond.js来帮助ie实现该功能。app

<!--[if lt IE 9]>
  <script src="respond.js"></script>
<![endif]-->

　　　　由于IE8及早期版本不支持Canvas，若是你的产品用到图表视图，则须要引入 ExplorerCanvas 来支持绘图功能。布局

<!--[if lt IE 9]>
  <script src="excanvas.js"></script>
<![endif]-->

　4. 低版本IEcss3支持CSS3部分属性（PIE.htc）
ui

下载地址： http://css3pie.com

　　　　用 PIE.htc 来让IE浏览器支持CSS3的 border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。

　　　　要使用 PIE 应用就要先把它引进来，这里不是在 html 文件里面引入，而是在 css 文件里面使用 behavior 来对文件进行导入。

　　　注：PIE.htc URL路径是相对于当前HTML文件，而不是CSS文件.

.borderRadius{
         border-radius: 10px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         background: #ABCDEF;
         behavior: url(css/PIE.htc);
}

　　　　使用详情请参考： https://www.jianshu.com/p/b18cbc3e6b64