解决Bootstrap网页在360安全浏览器兼容模式下无法正常显示问题

最近在公司做一个功能挺简单的网站系统，我习惯性的用chrome浏览器进行调试，网站前端大量用了bootstrap，还为了讨好领导加了不少H5+CSS3效果、各种图表，一切进行的那么顺利。有一天领导说要看看我做的程序，我给他访问ip地址，他用他电脑打开看，我勒个... 他用Win7的ie8打开的，那些我加的特效图表们能不显示的不显示，能丑的丑，反正跟我希望的效果恰恰相反，领导似乎也发现了问题，给我说：我们客户大多用ie浏览的，不能要求他们用最新的浏览器，你的程序必须兼容ie8，然后我开始更改。

让Bootstrap支持ie8的方法也不难，在页头加上下面一段代码就可以，这是官方给的解决方案：

    <!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->

然后把一些ie8不支持的css3特性用图片解决掉，比如border-radius我就用ps过得图片代替。

然后我用ie8打开看了一下，网站还原了原来美观的85%，觉得差不多了，然后拿过去给领导说，他说先让测试组的测试一下，我把访问地址给了测试组，测试组的同事用360安全浏览器打开网站程序，用“极速模式”没问题，用“兼容模式”比上次的ie8悲剧还严重，还没开始测试他就让我改ui问题。我发现360这个浏览器...... 不多说了，解决问题吧！所谓极速模式就是用chrome内核渲染网页，也就是说急速模式其实是给chrome内核穿了一套360的外套而已，我的程序在chrome下没问题，所以在急速模式下自然就没有问题，不过这个兼容模式是用ie浏览器内核渲染网页的，而且默认的引擎是ie7 .......... 所以我的那可怜的程序在ie8下勉强能跑，但在ie7下彻底崩溃了。

360安全浏览器：

所谓极速模式 == chrome内核+360的外壳

所谓兼容模式 == ie浏览器内核+360的外壳

为了解决问题我查了很多资料，怎么让bootstrap在ie7下也能正常跑起来？最终还是没找到答案，必经i7是石器时代的东西！我纳闷儿一个问题，电脑里明明有ie8浏览器，360浏览器为什么不用ie8引擎，而偏偏用ie7引擎呢？抓住这个问题，我找到了个强制要求浏览器按指定的ie内核来渲染网页的方法，在页头上加上

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

这样就可以强制用ie8内核渲染网页，如果电脑里有更高版本的ie那就设置成更高版本的，比如ie9 10 11 edge等，越高版本坑越少！

解决Bootstrap网页在360安全浏览器兼容模式下无法正常显示问题相关推荐

vue项目中，360浏览器兼容模式下部分页面显示不出来
1.问题在项目中引用了百度地图,但是在360浏览器的兼容模式下无法显示兼容模式可能就是为了兼容IE7之前的网站代码 , 而非我们字面理解的'兼容'二字 2.解决告诉浏览器最少使用IE11的内核去 ...
自己碰到的360安全浏览器兼容模式的问题总结
公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的DIV+CSS,hack都不了解,所以上网查了很多资料,也算是小有收获.此贴仅作为个人经验贴,大神还请指点. 遇到的问题 ...
360安全浏览器兼容模式怎么设置_测试新手一定要知道：最实用的Web兼容性测试经验都在这...
在日常工作中,我们经常碰到网页不兼容的问题.我们之所以要做兼容性测试,目的在于保证待测试项目在不同的操作系统平台上正常运行. 主要包括待测试项目能在同一操作系统平台的不同版本上正常运行:待测试项目能与 ...
360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，但是极速模式可以显示？
问题最近遇到一个验证码出不来的问题,在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来,效果如下: 这个验证码的代码元素如下,是一张图片,由接口提供的一个图片链接,返回的是文件流. ...
浏览器兼容模式下网页无法访问
浏览器兼容模式下网页无法访问解决方案: 打开360浏览器" 打开菜单,点击"工具",找到"Internet属性"并点击点击"高级&quo ...
vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...
记一次bug解决 bug发现项目不复杂,就是一个基于vue-cli3搭建的pc端项目在开发进入后半段的时候发现在360浏览器兼容模式先显示空白而且没有报错,此类问题之前我写react在低版本的qq ...
QQ浏览器及360浏览器兼容模式下怎么处理sessionStorage数据
现在很多网站都需要在兼容模式和极速模式下都适应,开发的时候一般都是谷歌浏览器,前端需要存储一些本地信息,一般用的最多的是localStorage跟sessionStorage.极速模式下或者谷歌浏览器 ...
360兼容模式页面错位_解决360双核浏览器兼容模式的页面显示问题
由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲染主流的网 ...
360浏览器如何打开开发者模式？（浏览器兼容模式下按F12）
360浏览器的开发者模式被隐藏了,找也找不到咋办呢? 解决办法点击这个扩展按钮点击管理点击高级管理激活开发者模式开是开了,但是还是没有开发者模式啊!!!!!! TNND,上面是打开小程序的 ...

解决Bootstrap网页在360安全浏览器兼容模式下无法正常显示问题

解决Bootstrap网页在360安全浏览器兼容模式下无法正常显示问题相关推荐

最新文章

热门文章