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

时间： 2024-10-06 02:31:00

360、IE等浏览器对bootstrap的影响的相关文章

比较恶心的360老年版浏览器 文件导出下载

function export_txt($data) { Header("Content-type: application/octet-stream"); Header("Accept-Ranges: bytes"); $destination_folder='./Public/file/'; //txt文件 $file_name=iconv('utf-8', 'gbk', '账号卡信息').date('Y-m-d H-i-s',time()).'.txt'; $

微信内置浏览器运用bootstrap后以大分辨率加载网页解决

最近两天做了个web app应用程序,在手机自带浏览器中正常,微信浏览器中却出现了字体缩小情况,经过实验,在去掉bootstrap.css引用后window.innerWidth是320px,加上引用后window.innerWidth是480px.手机浏览器以大分辨率加载网页,网页元素就会响应缩小. 经过一段段的删除bootstrap.css中的css,发现去掉 @-ms-viewport {  width: device-width;} 后网页就能在微信中正常显示了.bootstrap版本v

IE中cookie问题，带下划线的前置域名会不给设cookie，谷歌和火狐浏览器则不受影响

!! WARNING !!: Server hostname contains an underscore and this response sets a cookie. Internet Explorer does not permit cookies to be set on hostnames containing underscores. See http://support.microsoft.com/kb/316112

强制360,webkit内核浏览器显示兼容模式

页面顶部添加meta <meta name="renderer" content="webkit”> <!-- 避免IE使用兼容模式 —> <meta http-equiv="X-UA-Compatible" content="IE=edge">

Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器

Bootstrap 3 与 4 差别很大,目录文件结构.所引入的内容也不同,这里说说一下 Bootstrap 引入的文件.网页模板和兼容性问题.本网站刚刚搭建好,正好发一下文章原来测试网站. Bootstrap 4 目录结构如下 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-gri

浏览器内核

主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) 最近 "个人恶趣味" 持续发酵,突然想了解下浏览器内核的发展历史. 内核 首先得搞懂浏览器内核究竟指的是什么. 浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎.它负责取得网页的内容(HTML.XML.图像等等).整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机.浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效

【Bootstrap】2.作品展示站点

假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标 虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四

浏览器兼容性问题汇总

# 浏览器兼容性问题汇总 ## 问题1 ### first-child ## <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div p:first-child { color: red; } </style> </head> <

科技来电：360网盘停服那些事全解析

科技来电:360网盘停服那些事全解析昨天来源:智电网 <373期>今年对于众多网盘品牌来说是一个灾难性的一年,在这一年华为D盘.新浪微盘.UC网盘等纷纷倒地不起,网盘洗牌加速,用户日趋聚集在360.百度这两大网盘巨头之中,本以为国内网盘格局已定,没想到最近身为网盘巨头之一的360在毫无征兆的情况下突然宣布自家网盘停服,引发了人们对360的声讨浪潮. 1.网盘停服,对360声讨浪潮有多大? 贴吧.微博.论坛.应用商店等网友聚集地,可以说只要是有网友.有人气的地方,几乎都是对360的声讨浪潮,有人