自己碰到的360安全浏览器兼容模式的问题总结

本文分享了在360安全浏览器及IE浏览器兼容模式下解决网站样式错乱、页面空白等问题的经验,通过添加DOCTYPE声明、调整jQuery加载方式及设置X-UA-Compatible等方法成功解决了兼容性难题。

公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的DIV+CSS,hack都不了解,所以上网查了很多资料,也算是小有收获。此贴仅作为个人经验贴,大神还请指点。

遇到的问题大概有四点:

1、个人注册界面在兼容模式下CSS样式错乱

2、点击企业注册,界面出现空白页

3、点击商户中心,界面为空白页

4、首页如注册、登录入口消失,搜索框样式失效。

以上问题均出在360安全浏览器兼容模式下,经测试发现,此类问题在IE浏览器下也同时存在。


解决方式:

1、经过各种调试,突然发现,源代码没有加<!doctype>声明。上网查阅资料以后了解到,若没有此声明,浏览器默认为怪异模式编译,在怪异模式下,浏览器默认文档模式为5(在外网F12查看,文档模式默认果真是5),加上声明之后,debug以后发现文档模式已经默认为9,页面显示正常。问题解决。(自行查询怪异模式、标准模式、文档模式、浏览器模式,肯定会有收获。)

2、在外网排查,有如下代码

<!--[if !IE]> -->
 <script type="text/javascript">
 window.jQuery ||
 document.write("<script src='http://www.xinxinsn.com/ctower-admin/framework/js/jquery-2.0.3.min.js'><script>");
 </script>
 <!-- <![endif] -->
 <!--[if IE] -->
 <script type="text/javascript">
 window.jQuery||
 document.write("<script src='http://www.xinxinsn.com/ctower-adminframework/js/jquery-1.10.2.min.js'><script>");
 </script>
 <!-- [endif] -->

修改为

<!--[if !IE]><!-->
<script type="text/javascript">
window.jQuery || 
document.write("<script src='http://www.xinxinsn.com/ctower-admin/framework/js/jquery-2.0.3.min.js'><script>");
</script>
<!--<![endif]-->


<!--[if IE]>
<script type="text/javascript">
window.jQuery || 
document.write("<script src='http://www.xinxinsn.com/ctower-admin/framework/js/jquery-1.10.2.min.js'><script>");
</script>
<![endif]-->

页面打开空白问题一并解决,2、3问题解决。

4、在title下边加一行代码:<mata content="IE=edge" http-equiv="X-UA-Compatible">  ,默认选取当前最高浏览器版本打开。样式恢复正常。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值