900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > bootstrap和css样式兼容(ie 360 qq)不同浏览器的解决办法

bootstrap和css样式兼容(ie 360 qq)不同浏览器的解决办法

时间:2018-09-19 03:46:19

相关推荐

bootstrap和css样式兼容(ie 360 qq)不同浏览器的解决办法

一、作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题——兼容性。

开发者在前端开发,调试的时候,使用的基本都是谷歌、火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器仍然还是360、qq、搜狗等。而这些国内主流的浏览器,也大部分都会存在两种模式,分别是极速模式(Webkit内核),兼容模式(ie内核),极速模式兼容性也不错,所以问题主要出在使用ie内核的这些浏览器。

二、分享下我解决这个问题使用的方法

1.在title前加一下,打开浏览器时强制谷歌内核,或使用最高版本的ie渲染。

【**注意:**不过这个方法针对360等同时拥有极速(谷歌内核)模式和兼容(ie内核)模式的浏览器来说,如果这个页面之前是用切换兼容模式打开的,下一次打开浏览器会默认使用上一次的兼容模式打开】

<meta name="renderer" content="webkit"/><meta name="force-rendering" content="webkit"/><!-- 解决部分兼容性问题,如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2.在bootstrap.min.js和jQuery.js前加,这里也是有看到其他教程提到如果使用了本地的respond.min.js是不起作用的

<!--[if lt IE 9]><script src="/libs/html5shiv/3.7/html5shiv.min.js"></script><script src="/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->

三、仍然遇到的问题

加上以上方法之后,boostrap样式可以兼容到ie8,以我的样式为例,还可以兼容到ie7,不过这里需要值得注意的还有,针对不同的电脑系统,这个方法也有可能会失效。

我的win10的,在win10里切换ie9-的样式都是正常的,但是如果用win7,或者xp系统,还是会存在样式不兼容的问题。

四、终极大法

所以这里用到的终极大法是,监控网页是否用ie内核打开,如果是,则提醒用户切换到当前浏览器的极速模式,或者使用谷歌,火狐等浏览器。

<script>$(function(){if(!!window.ActiveXObject||"ActiveXObject" in window){alert("提示: 您在使用的浏览器内核版本可能导致浏览异常。\n" +"\n" +"解决方法(任选其一):\n" +"请切换到当前浏览器的极速模式\n" +"请安装Chrome(谷歌浏览器)、Firefox(火狐)浏览器、QQ浏览器、搜狐浏览器、360浏览器来使用本系统\n")}});</script>

在实际的项目开发里,兼容性还是非常重要的问题,有些项目为了兼容还得写另一套css,果然学习还是永无尽头的,加油加油加油。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。