前言

1.确认好需求

2.jQuery版本

3.语法

4.ajax请求

5.下拉框插件

6.多层级下拉框插件

7.日期选择器插件

8.分页插件

9.弹窗

总结

前言

没想到吧，这年头还有人用IE5呢，但是没办法，有些毕竟老的机构开发的系统比较早，那时候写的是IE5的内核，到现在需要增加一些小功能，所以需要兼容IE5。好了，废话不多说，下面小谭把我用的能够兼容IE5的插件以及踩过的坑给大家总结一下。

1.确认好需求

一定一定一定要确认好客户使用的是什么版本内核的IE，我这边客户说的是兼容到IE11，说的是浏览器的版本为IE11，并不是内核版本，虽说IE浏览器的版本为11，但是内核版本还是IE5。所以一定要确认好客户使用的IE内核的版本。

2.jQuery版本

jQuery版本我测试过的，能够兼容到IE5的版本一定要是2.0以下的，并且1.0版本的jQuery有一个版本也有问题，就是1.10.1。这个版本的jq在IE5上会报错，但是1.10.2版本不会了，应该是修复了吧。

3.语法

切记！！IE5不支持ES5和ES6语法以及CSS3新特性，常见容易踩坑的有：

变量的声明方式；低版本ie不支持let和const声明变量方式

不支持箭头函数，匿名函数只能用传统的写法；

不支持三目运算符；

数组不支持forEach、map等方法；

不支持for...in和for...of循环；

不支持JSON对象；

写好之后最好检查一下有没有console.log()没有注释掉，我遇到过线上console报错的；

对象的最后一个属性不要加逗号；

Object.keys方法和Object.values方法不支持；

IE5不支持绝对定位属性；

不支持nth选择器；

不支持flex布局；

不支持子代选择器（>）;

不支持最大最小宽度和高度；

不支持透明度、圆角属性、过渡动画、transition等等；

4.ajax请求

对于低版本的IE，请求千万不要使用jq封装好的ajax，jq封装好的ajax请求只适用于IE高版本，应该是IE8及以上，使用在IE低版本会出现拒绝访问的问题。

当时遇到这个问题的时候，相信大家和我一样，自己手写一个原生的请求；然后我写了，但是！还是有问题，原生的请求IE也会出现兼容问题。找了大量的文献（其实是去某度），然后写出了IE原生请求的兼容写法：

    var Xmlhttp = null;if (window.XMLHttpRequest) { // code for IE7, Firefox, Opera, etc.Xmlhttp = new XMLHttpRequest();} else if (window.ActiveXObject) { // code for IE6, IE5Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}if (Xmlhttp != null) {Xmlhttp.onreadystatechange = function () {if (Xmlhttp.readyState == 4) { // 4 = "loaded"if (Xmlhttp.status == 200) { // 200 = "OK"//这里写成功时的操作console.log("后端返回给的数据", Xmlhttp.responseText); //JSON字符串} else {alert("Problem retrieving XML data:" + Xmlhttp.statusText);}}};Xmlhttp.open("GET", 请求地址, true);Xmlhttp.send(null);} else {alert("Your browser does not support XMLHTTP.");}

这时候文件在本地文件夹直接打开请求是成功的，但是！！发布到线上时，请求就会报错，然后我又查阅了大量的文献（某度），发现是跨域的问题，然后在线上配置nginx，使用反向代理就可以啦~

有细心的小伙伴发现了，我上面请求写的后端返回的数据是Xmlhttp.responseText，返回的是一个JSON字符串，但是我在上面写道IE5是没有JSON对象的，那该这么将后端给我的转为JSON对象嘞，既然IE5不支持JSON对象，那我们就自己写一个，哈哈，自己写是不可能自己写的，在网上找到了写好的，下载地址：https://github.com/douglascrockford/JSON-js 下载好之后引入在项目头部引入一下就OK了。

5.下拉框插件

IE自带的输入框，下拉框都不怎么好看，输入框还好，可以自己改一下样式，但是下拉框就很头疼，所以下拉框我选择使用jq美化插件，插件名称：jQuery Selectric，可以切换喝多风格，最重要的，它能够兼容IE5！！我是下载的zip压缩包，然后引入的静态文件，具体的使用方法大家可以参照他这边的官方文档。另附上使用效果：

6.多层级下拉框插件

由于项目需求，难免会遇到多层级选择的问题，我这边用的是 comboTreePlugin，虽然这个功能能够兼容IE5，但是一些样式不能够兼容，所以运到到我这边的项目的时候，我做了一点样式的改动。并且搜索不能够使用，后面我自己把这个搜索框拿掉了，其实这个多层级下拉框兼容IE5一般，但是由于项目周期问题，所以就用了这个，虽然有点问题，但是用在我这边的项目里足够了，如果大家遇到更好的兼容插件欢迎在评论区分享呀，另附上使用效果：

7.日期选择器插件

因为项目中需要用到日期选择器，但是这个亲妈养的IE5对于input属性type不支持date，所以我就找一个特别强的日期选择器插件：日期选择器，也有点小瑕疵，第一呢就是他只能选择到年月日，不支持时分秒，所以我自己在后面接了一个input框，让用户自己输入具体时间，做个校验就行了。还有就是css文件他这边写的是在js里面自己引入的，所以要注意一下路径问题；另附上使用效果：

8.分页插件

分页插件我用的是：jQuery分页插件pagination，什么都好，就是样式需要自己画，但是也还好，就几个方块，功能好用才是王道，也是能够兼容IE5的，另附上使用效果：

9.弹窗

关于弹窗嘞，我找了半个小时左右没找到符合我要求的插件，所以我自己手写了一个，附上代码和效果图，别忘记引入jQuery了哟！如果有家人们找到类似的能够兼容到IE5的弹窗插件，评论区交流一下呀

HTML：

<p onclick="openPopup()">打开弹窗</p>
<div class="myPopup"><img src="./static/myPopupBg.png" alt="" class="myPopupBg"><div class="myPopupContent"><div class="myPopupContentTitle"><h3 class="cl"><span class="fl">弹窗</span> <img src="./static/close.png" alt="" class="myPopupClose fr" onclick="closePopup()"></h3></div><div class="myPopupContentBody"><div class="myPopupContentBodyContentType cl">需要展现的内容</div></div><div class="myPopupContentFooter"><span onclick="closePopup()">确&emsp;定</span></div></div></div>

CSS:

<style>
.myPopup {position: absolute;_position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;width: 100%;height: 101%;overflow: hidden;display: none;text-align: center;
}.myPopupContent {background-color: #fff;padding: 15px;width: 700px;margin: auto;margin-top: 100px;
}.myPopup .myPopupBg {position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: -1;
}.myPopupContentTitle h3 {font-size: 16px;line-height: 18px;
}.myPopupContentTitle {margin-bottom: 30px;}.myPopupContentTitle span {font-weight: bold;color: #409eff;
}.myPopupClose {height: 12px;width: 12px;cursor: pointer;
}.myPopupContentFooter {text-align: right;margin-top: 30px;
}.myPopupContentFooter span {height: 28px;width: 80px;text-align: center;line-height: 28px;padding: 0 10px;background: #3383FF;box-shadow: 0px 4px 15px 2px rgba(51, 131, 255, 0.2);border-radius: 5px;color: #fff;font-size: 12px;cursor: pointer;
}.myPopupContentBody {text-align: left;height: 300px;overflow-y: auto;padding: 0 10px;
}.fr {float: right;
}.fl {float: left;
}.cl:after {content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;
}.cl {zoom: 1;
}
</style>

JS：

  function openPopup() {$(".myPopup").css("top", document.body.scrollTop + 'px')$("body").attr("style", "overflow:hidden")$(".myPopup").show();}function closePopup() {$("body").attr("style", "overflow:visible");$(".myPopup").hide();}

用到的图片背景图以及关闭按钮，由于IE5不支持透明度属性，所以自己用ps做了一个半透明的png：

效果图：

总结

好啦，这就是今天小谭要分享的内容了，有可能还有很多IE中我没遇到的兼容问题，欢迎在评论区一起交流呀，最后，希望没有IE！

IE兼容/IE5兼容踩过的坑相关推荐

IE浏览器兼容Object.assign踩过的坑
IE浏览器兼容Object.assign踩过的坑 1.背景: 使用Object.assign,又在IE浏览器上访问时,会报该方法不存在~ ERROR:对象不支持"assign"属性 ...
H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
详解原生AJAX请求demo（兼容IE5/6）
function createXHR(){ // 检测原生XHR对象是否存在if ( window.XMLHpptRequest ){// 如果存在就返回新实例return new XMLHpptRe ...
C/C++ 踩过的坑和防御式编程
相信你或多或少地用过或者了解过 C/C++,尽管今天越来越少地人直接使用它,但今天软件世界大多数软件都构筑于它,包括编译器和操作系统.因此掌握一些 C/C++ 技能的重要性不言而喻. 这场 Chat ...
docker go get问题_创建优化的Go镜像文件以及踩过的坑
点击上方蓝色"Go语言中文网"关注我们,领全套Go资料,每天学习 Go 语言本文作者:倚天码农原文链接:https://segmentfault.com/a/119000002 ...
vSAN一次人肉工程师踩过的坑
vSAN一次人肉工程师踩过的坑原创李严省虚实之路 2017-04-16 大家星期天好,这几天阳光不错,是个带家人或者女朋友出去转转的好时候.可惜这二天一夜做了VMwarevSAN人肉工程师,这二 ...
游戏服务器数据库踩过的坑
在页游服务器这块很早之前一直没有认真考虑过,大部分是之前搭建好的,我只需要按照他原来的设计继续码代码就好了. 可是这次服务器重构的过程中,还是遇到了很多始料不及的问题.那么就按照踩过的坑,去一个个讲讲 ...
Loadrunner11在Win10上使用踩过的坑
环境:Win10家庭版,loadrunner11 loadrunner11只支持IE9及以下,而Win10的IE是降不了级的,所以自己写的脚本,记录踩过的坑. 1 安装按照教程安装比较顺利,但是破解 ...
创建优化的Go镜像文件以及踩过的坑
在Docker上创建Go镜像文件并不困难,但建立的文件很大,接近1G,使用起来不太方便.Docker镜像的一个主要难题就是如何优化,创建小的镜像.我们可以用多级构建的方法来创建Docker镜像文件,它 ...
Fragment全解析系列（一）：那些年踩过的坑
写文章注册登录首页下载App Fragment全解析系列(一):那些年踩过的坑作者 YoKey 关注 2016.02.27 21:48 字数 3995 阅读 44322评论 120喜欢 419 ...

IE兼容/IE5兼容踩过的坑

前言

1.确认好需求

2.jQuery版本

3.语法

4.ajax请求

5.下拉框插件

6.多层级下拉框插件

7.日期选择器插件

8.分页插件

9.弹窗

总结

IE兼容/IE5兼容踩过的坑相关推荐

最新文章

热门文章