【JavaWeb】解决IE低版本不兼容问题记录

【问题描述】

原先的代码已在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方式

#2-> 本地JS文件引入方式

如果有多个版本兼容，可以用以下方式声明

 注意路径：/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

 [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

下载地址：http://selectivizr.com/

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-> 指定浏览器版本可用以下方式进行声明，注意放置在中，尽量放置在其他声明之前

<%--限定默认打开IE浏览器的版本--%>