公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的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"> ,默认选取当前最高浏览器版本打开。样式恢复正常。
本文分享了在360安全浏览器及IE浏览器兼容模式下解决网站样式错乱、页面空白等问题的经验,通过添加DOCTYPE声明、调整jQuery加载方式及设置X-UA-Compatible等方法成功解决了兼容性难题。
4095

被折叠的 条评论
为什么被折叠?



