分类: Web

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap 提高兼容性

一些挺好看的H5模板和Bootstrap模板在Chrome/Firefox/Safari下都正常,但是在IE下浏览面目全非,整理了下解决方法:

一、引入依赖的Javascript:

https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js
https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js

这2个Javascript 是在本站开放CDN 上,您可以复制地址直接使用,安全和稳定性不用担心。如果担心的,本博客下附件可以下载,另外要引用 Jquery,根据版本引入

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

http://www.bootcdn.cn/jquery/这里有各版本的jquery

二、增加meta头部信息:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

bootstrap 不支持IE兼容模式,为了让 IE 浏览器运行最新的渲染模式,将添加以上标签在页面中,IE=edge 表示强制使用 IE 最新内核,chrome=1 表示如果安装了针对IE6/7/8 等版本的浏览器插件Google Chrome Frame (可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是 Chrome 浏览器内核),那么就用Chrome内核来渲染。

三、判断是IE低版本时,引入js:

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/r23/html5.js"></script>
    <![endif]-->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
 <script src="https://cdn.bootcss.com/html5shiv/3.7/html5shiv.min.js"></script>
 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

发表新评论