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
360、IE等浏览器对bootstrap的影响的更多相关文章
- 浏览器的自动翻译会影响 JS 逻辑
有人在 QQ 群里反馈,官方注册后跳转时出现 Bug. 收到群友非常有用的资讯,这是因为浏览器的自动翻译功能引起的. 11:04:21[潜水]Better Command 2017/12/30 11: ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式
以下信息摘自360官方网站: 浏览模式:极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:极速模式表示极速模式兼容模式表示兼容模式IE9IE10模式表示IE9/IE10模式(仅 ...
- IE中cookie问题,带下划线的前置域名会不给设cookie,谷歌和火狐浏览器则不受影响
!! WARNING !!: Server hostname contains an underscore and this response sets a cookie. Internet Expl ...
- 页面点击任意js事件,触发360、IE浏览器新页面
在<head></head>标签中 <base target=_self> 不会再增加页面
- ie.360,qq浏览器这种ie内核浏览器默认阻止弹窗
- 【CPU】解决打开360或者Chrome浏览器CPU占用过高
cmd 运行: RD /s /q "%USERPROFILE%\AppData\Roaming\Microsoft\Protect"
- Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap 3 与 4 差别很大,目录文件结构.所引入的内容也不同,这里说说一下 Bootstrap 引入的文件.网页模板和兼容性问题.本网站刚刚搭建好,正好发一下文章原来测试网站. Boot ...
- oracle数据库 网页管理360浏览器登录不上
使用谷歌浏览器可以登陆,然后在使用360之类的浏览器 就可以登录了
随机推荐
- Multi-task Pose-Invariant Face Recognition 论文笔记
摘要: 在不受限制的环境中拍摄的人脸图像通常包含显著的姿态变化,这会显著降低设计用于识别正面的算法的性能.本文提出了一种新颖的面部识别框架,能够处理±90°偏航范围内的全方位姿势变化.所提出的框架首先 ...
- Raising Modulo Numbers(ZOJ 2150)
这题其实就是快速求一个高次幂的模. 这是题目的答案 #include<iostream> #include<cmath> using namespace std; ]; ]; ...
- CEPH安装教程(下)
创建 CEPH 文件系统 创建存储池 # ceph osd pool create cephfs_data 64 # ceph osd pool create cephfs_metadata 64 创 ...
- java部分基础知识整理----百度脑图版
近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...
- bzoj1227: [SDOI2009]虔诚的墓主人(树状数组,组合数)
传送门 首先,对于每一块墓地,如果上下左右各有$a,b,c,d$棵树,那么总的虔诚度就是$C_k^a*C_k^b*C_k^c*C_k^d$ 那么我们先把所有的点都给离散,然后按$x$为第一关键字,$y ...
- Uva1608
如果一个序列的所有子序列中均存在至少一个元素,这个元素在该子序列中只出现一次,则这个序列non-boring. 当一个序列[x,y]中没有元素只出现一次,那么该序列不符合要求,如果有的话,设为第i个元 ...
- docker镜像的分层结构三
docker的镜像分层 docker里的镜像绝大部分都是在别的镜像的基础上去进行创建的,也就是使用镜像的分层结构. 实验 比如说使用dockerfile去创建一个最简单的hello镜像.创建好对应的d ...
- java——模拟新浪微博用户注册
1.创建用户类,重写HashCode()和equals()方法: import java.util.*; public class User{ private String name; private ...
- 04.Spring Ioc 容器 - 刷新
基本概念 Spring Ioc 容器被创建之后,接下来就是它的初始化过程了.该过程包含了配置.刷新两个步骤 . 刷新由 Spring 容器自己实现,具体发生在 ConfigurableApplicat ...
- linux 编程笔记1 crusher for linux
1.反显示字符crusher #include <stdio.h> int main (int argc, char *argv[]) { printf("\033[7m mor ...