IE8 + JQuery1.12.4 兼容之旅

公司的产品大部分的用户可能还在使用IE8，无奈兼容IE8重构中，其实对于兼容IE8没有太多的抗拒，这么久了网上关于如何兼容IE的资料比较多，整体看来没有什么特别大的坑。

起手式

如果需要兼容IE8，那就应该放弃绝大多数的现代javascript框架，使用HTML+ajax的方式或服务端模板渲染引擎开发，这样可以减少很多的问题，推荐使用下面的配置：

jquery-1.12.4.min.js (用于ajax请求，DOM操作及事件监听，一定要使用2.0以下的版本)
bootstrap3.3.7（用于系统中美观度要求较高，需要定制开发的页面）
layUI2.5.6（用于系统中无需设计的功能页面的开发）
echarts3.8.4 注意使用定制版本，勾选兼容IE8，即使这样，在IE8下某些图标仍会丢失部分样式。
阿里图标库

其他的内容就靠自己手写啦！

使用html或服务端模板渲染，会带来代码结构的问题，建议可采用iframe的形式加载新的页面。

IE8 兼容bootstrap自适应及栅格布局

这个相对比较简单，只要在html body标签下添加以下内容：

  <!-- 让IE8/9支持媒体查询，从而兼容栅格 --><!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

清除IE下滚动条

.menu-list-container {width: 250px;height: 100%;overflow-y: auto;float: left;scrollbar-width: none;/* Firefox */-ms-overflow-style: none;/* IE 10+ */
}.menu-list-container::-webkit-scrollbar {display: none;/* Chrome Safari */
}

这里需要注意下IE8的滚动条隐藏比较麻烦，需要用div嵌套遮挡的方式，感觉没有必要，故IE8下这个解决方案是有问题的

清除iframe标签边框

iframe 最好采用absolute布局，避免因为iframe边框的宽度撑开父级容器，从而导致页面在IE浏览器中发生意料之外的滚动，可参考一下布局：

.detail-container {height: 100%;margin-left: 500px;background-color: #edf6fd;position: relative;
}.detail-container iframe {width: 100%;height: 100%;border: none;position: absolute;top: 0;left: 0;border: 0;
}

清除IE8下的iframe边框需要额外为iframe标签添加如下属性：

<iframe frameborder="0"></iframe>

IE8下常见的不兼容样式

不支持 border-radius
不支持div折角效果

还在苦苦寻找面试题，来码叔刷面试题吧！又快又省心！微信扫描下发小程序码，即可刷刷刷！

IE8 + JQuery1.12.4 兼容之旅相关推荐

jquery-1.12.4.min.js(代码免费下载)
jquery-1.12.4.min.js页面代码(创建一个js页面,把下面代码复制进去就成了一个jquery库)(找了一段时间,csdn里全是付费下载,有些地方也可以下,但很找,所以本人就无偿把自己在 ...
QC与IE8 、WINDOWS 7 兼容问题的解决方案
QC与win7不兼容 1. 通过开始菜单搜索框,输入UAC,会出现"更改用户帐户控制设置"(ChangeUser Account Control菜单项.点击打开后,通过滚动条选 ...
IE8中文件下载不兼容问题
在项目中遇到一个比较恶心的问题,项目要求兼容IE8.下载文件在chrome中一切正常可以下载,但是在IE8中就是不行.试了很多方法,在后台springMVC中也改了一大堆,还是无用. 最后发现: 只要 ...
ie6,ie7,ie8,ie9 css bug兼容解决记录
select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:#dd ...
高通 Android 8/9/12/13 兼容U盘识别extfat模式
Android本身不支持extfat格式需要通过nofuse 打kernel补丁方式去实现 Android 8/9 1.kernel/msm-4.9/arch/arm64/configs/sdm67 ...
遭遇IE8下的JavaScript兼容问题
博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: var a = document.creat ...
强制将IE8设置为IE7兼容模式来解析网页(转）
英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何 ...
强制将IE8设置为IE7兼容模式来解析网页
英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何 ...
解决eWebEditor在线文本编辑器在IE8,i9下不兼容的方法
最近我把IE浏览器更新到了IE8.0,在用eWebEditor在线HTML文本编辑器的时候点击eWebEditor上的所有编辑按钮都没用,只看到浏览器状态栏左下角显示网页上有错误,于是上网查了一下,解 ...