首页 > 代码库 > 360、IE等浏览器对bootstrap的影响

360、IE等浏览器对bootstrap的影响

2024-09-17 13:44:01   218人阅读

笔者开发的web程序部署上线后发现，bootstrap的菜单不显示，开发时候用chrome没有发现问题，在360浏览器上跑，发现360默认的是兼容模式，切换到极速模式就能够显示菜单了。

但是这样的用户体验不好，总不能让用户每次都自己切换，于是开始找办法。

在<head>标签里加入下面代码

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

<meta http-equiv="X-UA-Compatible" content="IE=9" />

 

解释如下：

针对浏览器的内容做标识（使用meta标签调节浏览器的渲染方式）
bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。关于此meta标签的具体说明，可参见StackOverflow上的精彩回答，<meta>标签高人的英文解释可以参看
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
我又加了一句
<meta http-equiv="X-UA-Compatible" content="IE=9" />
然后就可以了
内核控制Meta标签，因为目前国内的主流浏览器都是双内核，故而添加meta标签来告诉浏览器使用什么内核来渲染页面

原文部分内容来自：http://www.dailibu.com/javascript/2016052288/bootstrapBuZhiChiIEJianRongMoShi

360、IE等浏览器对bootstrap的影响


联系
我们