【问题描述】
原先的代码已在Google Chrome、Edge、IE11上通过测试,因项目需求,需要在IE8及以下的版本上兼容运行。
各个IE版本的问题记录
- IE10,IE11没问题
- IE9:能运行,但CSS动画效果降级为静止了
- IE8及以下版本:CSS动画效果直接失效,不能运行,版本越低CSS布局也会发生轻微变化
调试报错
【解决方法】
- jQuery版本问题
jQuery 2.0将移除对IE6/IE7/IE8的支持,jquery从2.0开始不支持IE8,最后支持IE8的版本是1.9。
下载对应的jQuery版本然后引入jsp页面即可解决这个问题。
#1-> CDN方式
<!--IE8只能支持jQuery1.9-->
<!--[if lte IE 8]>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<![endif]-->
#2-> 本地JS文件引入方式
<!--[if lte IE 8]> 只能IE8识别<![endif]--> 如果有多个版本兼容,可以用以下方式声明
<!--IE8只能支持jQuery1.9-->
<!--[if lte IE 8]>
<script src="./scripts/jquery-1.9.1.min.js"></script>
<![endif]-->
<script src="./scripts/jquery.min.js"></script>
注意路径:/web/scripts/jquery-1.9.1.min.js
[reference]
jQuery兼容浏览器IE8方法
https://blog.csdn.net/dongyu0729/article/details/73474964
jquery下载所有版本(实时更新)
http://www.jq22.com/jquery-info122
- JSON未定义问题
程序中用JSON转换的时候可能会因为浏览器版本问题出现‘JSON未定义’的错误。
JSON.stringify();
解决办法-> 引入定义json的文件json2.js,
下载地址:https://github.com/douglascrockford/JSON-js
<script src="./scripts/json2.js"></script>
[reference]
解决在IE下“JSON”未定义的问题
https://blog.csdn.net/weboof/article/details/53162343
- CSS3动画效果在IE低版本不支持
最暴力的解决方式是换低级的动画效果,尽量不用CSS3,界面会比较丑,可参考下面这种简单的loading动画
loading加载效果 https://www.cnblogs.com/tianxiangbing/p/loading.html
其他的一些方法,主要是让IE低版本支持CSS3的一些特性
#1-> ie-css3.htc https://www.cnblogs.com/viewcozy/p/4828122.html
#2-> selectivizr 让IE6-IE8支持CSS3
CDN地址:https://www.bootcdn.cn/selectivizr/
使用方式:http://caibaojian.com/selectivizr.html
#3-> ieBetter.js https://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/
- 其他需要注意的点
#1-> 有时候代码没有问题但是CSS效果失效可能是因为浏览器缓存没有清除,运行时【Ctrl+F5】即可解决!
#2-> 指定浏览器版本可用以下方式进行声明,注意放置在<head></head>中,尽量放置在其他声明之前
<%--限定默认打开IE浏览器的版本--%>
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=7">