ie8兼容总结

背景

虽然好些年不用jquery了，不过以前学jquery源码的经验还是历历在目。
最近维护老项目，需要开发一个兼容ie6的jquery插件，遇到了一些兼容性的问题，记录一下。

需求

需要做一个多种类型的验证码(图片拖拽，随机字符)的业务功能，因为是在多个平台上都要用且这些平台都是许多年前开发的，所以考虑做成一个jquery插件，方便维护。

问题

1. css3的兼容
   因为第一个版本没考虑到要兼容低版本Ie，以为只要做一个jquery插件即可，毕竟都快2022了，谁还用ie呀。所以圆角和阴影都是用了css3。但是后来在ie8中的效果就很尴尬。
   后来找到CSS3PIE这个库，就兼容了。
   css3pie地址 http://css3pie.com/
   
   这个库能对钝角及阴影等部分css3属性进行兼容处理
   demo

.slide-box .slide-img-scroll-bar {
  position: relative;
  background: #eef4f5;
  margin: 0px 10px 15px 10px;
  height: 28px;
  border: 1px solid #adadad;

  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  behavior: url("./lib/style/resource/PIE.htc");	//这里的这个地址要注意！！  不是该css相对库文件的地址，而是引用该css的html地址.这里有点坑。
}

2. cors跨域请求
   有几个地方需要设置,(建议不用cors跨域而使用jsonp,原因请看第四点)
   1 在jquery插件初始化的时候进行设置

jQuery.support.cors = true;

2 ajax请求需要设置

crossDomain:true

3 cors方式跨域需要设置ie浏览器，详情可查看下面链接
https://blog.csdn.net/tjj3027/article/details/81354888

4. jsonp跨域
   建议使用jsonp方式在ie8中跨域。
   因为用cors跨域的话，需要浏览器设置。且ie10以下的不支持cors方式跨域。这次的插件也因为需要这样设置导致请求改成jsonp方式跨域

5. 缓存需要手动设置
   ajax请求需要手动清除缓存，在ajax中加上cache:false，可以看上图

6. ie中需要删除console

7. 不兼容css的透明属性opacity
   有两种方案，
   一种是用
   display: block & none;来进行切换
   另一种是用filter来兼容低版本浏览器

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;

8. 图片base64 有体积限制
   因为验证码都是接口返回的动态图片，之前都是设计成base64传递，后来发现，验证码图片小体积的可以在ie8中显示，但是稍微大点的都无法显示。这是因为ie8中用base64来显示的图片体积不能超过38kb。
   解决办法
   1. 将接口改成数据流，而不是用base64
   2. html中使用

<img src="http://10.10.10.10/getImg?id=123">

这样的写法