【问题描述】
原先的代码已在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="/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方法
/dongyu0729/article/details/73474964
jquery下载所有版本(实时更新)
/jquery-info122
JSON未定义问题
程序中用JSON转换的时候可能会因为浏览器版本问题出现‘JSON未定义’的错误。
JSON.stringify();
解决办法-> 引入定义json的文件json2.js,
下载地址:/douglascrockford/JSON-js
<script src="./scripts/json2.js"></script>
[reference]
解决在IE下“JSON”未定义的问题
/weboof/article/details/53162343
CSS3动画效果在IE低版本不支持
最暴力的解决方式是换低级的动画效果,尽量不用CSS3,界面会比较丑,可参考下面这种简单的loading动画
loading加载效果/tianxiangbing/p/loading.html
其他的一些方法,主要是让IE低版本支持CSS3的一些特性
#1->ie-css3.htc /viewcozy/p/4828122.html
#2-> selectivizr 让IE6-IE8支持CSS3
下载地址:/
CDN地址:/selectivizr/
使用方式:/selectivizr.html
#3-> ieBetter.js/wordpress//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">