【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方式

<!--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

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

<%--限定默认打开IE浏览器的版本--%>
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=7">

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

猜你喜欢