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="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script src="http://apps.bdimg.com/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，果然学习还是永无尽头的，加油加油加油。

bootstrap和css样式兼容（ie、360、qq）不同浏览器的解决办法相关推荐

css样式float造成的浮动“塌陷”问题的解决办法
css样式float造成的浮动"塌陷"问题的解决办法参考文章: (1)css样式float造成的浮动"塌陷"问题的解决办法 (2)https://www.cn ...
关于jquery动态改变css样式后，对象获取不到的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 情况如下: <!DOCTYPE html> <html><head><meta ch ...
什么是浮动塌陷css,css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...
html width 100 无效,html css 样式中100%width 仍有白边解决办法
Linux服务器中木马(肉鸡)手工清除方法由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡 ...
html css 样式中100%width 仍有白边解决办法
把 <body >改成<body style="margin=0%"> 转载于:https://www.cnblogs.com/memoryLost/p/1 ...
bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意一.总结一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
html打印预览首行缩进样式无效,css首行缩进没有效果的原因及解决办法
css首行缩进没有效果的原因及解决办法发布时间:2020-12-23 09:52:37 来源:亿速云阅读:69 作者:小新这篇文章将为大家详细讲解有关css首行缩进没有效果的原因及解决办法,小编 ...
ie不兼容的几个js问题及解决办法
ie不兼容的几个js问题及解决办法参考文章: (1)ie不兼容的几个js问题及解决办法 (2)https://www.cnblogs.com/xin9984/p/6110819.html 备忘一下.
360加强网站拦截附解决办法
360加强网站拦截附解决办法最近几天一堆网站被360拦截,且无继续访问按钮,加强拦截是好事,不过无脑拦截也是解决不了问题的.真正的骗子,钓Y,BC,H那些哪个不是一堆网址换来换去.苦的了一些做站的 ...