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

笔者开发的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