【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低版本不兼容问题记录相关推荐

html表单居中_如何在IE低版本中兼容HTML5表单属性placeholder属性
WEB开发数据提交是必不可少的,为了更友好的用户体验,通常需要给输入框一个默认的提示信息.HTML5技术提供了一个表单属性placeholder专门用于输入框默认提示,但是在IE低版本中根本不兼容. ...
解决maven3.6版本不兼容idea2017问题
解决maven3.6版本不兼容idea2017问题参考文章: (1)解决maven3.6版本不兼容idea2017问题 (2)https://www.cnblogs.com/qianxiaoxion ...
h5开发解决华为自带低版本浏览器兼容的问题
先说明一下场景,要求做一个h5贷款的表单提交,既能在app内使用也app外面使用,app使用版本高,自然不用太多考虑兼容性问题,flex布局随意发挥,但在app外面使用的场景就复杂得多,市面上的主流机 ...
低版本浏览器兼容处理
1.HTML5新标签对IE低版本浏览器的兼容处理问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法 ...
HTML data属性简介以及低版本浏览器兼容算法
实例使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
对于 IE低版本不兼容问题的处理
坑爹的IE低版本浏览器总是需要我们去编写特殊的代码才可以,脑残的我之前总是编写一套CSS,让页面在Firefox.Chorme等牛逼闪闪的浏览器与IE这SB浏览器中的显示差不多,差不多,谁懂么,好好的 ...
解决VMWare低版本无法打开高版本创建的系统
VMWare低版本无法打开高版本出现如下错误:(vmware15打不开vmware16) 解决方法: 1.打开虚拟机的目录 2.找到虚拟机配置文件(vmname.vmx)和主VM磁盘的配置文件(vmn ...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...
怎么解决CAD图纸版本不兼容的问题呢？
经常使用CAD的小伙伴们在对图纸进行工作时应该都遇到过这样的问题,在自己的电脑中绘制的CAD图纸,在其他同事的电脑中进行编辑的时候则无法显示出来,而图纸源文件也并没有受损,但就是打不开!其实呀,很多 ...

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

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

最新文章

热门文章