一些挺好看的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]-->

Tag标签:「兼容性 IE 浏览器」更新时间:「2021-11-04 16:33:26」阅读次数:「765」