IE10中几个兼容性的处理 ( 'SCRIPT5022: SecurityError', z-index失去控制)

在对咱们的PC项目进行一些在IE10中的基本功能测试时，发现如下两个问题:

1. 对canvas使用toDataURL时出现 "SCRIPT5022: SecurityError" 错误。
2. css的z-index在IE10中表现诡异(在一个盒子中有多个子盒子，父子级都具备position属性，子级的层级并无按照z-index的数值排列)。

公司开发们用的是Mac，因此测试这个的时候leader把他的老年机带了过来。测试的环境是win8+360安全浏览器，选择360的兼容模式，F12打开调试面板，调试面板的选项中还能够选择IE版本。页面路由跳转时控制台elements表现为html为空，有个双箭头的图标点击可使控制台载入当前页面资源。

---

解决方案

1. IE10中的canvas在导出图像数据时由于图像的跨域而产生的安全性错误,如下是国际论坛上的解决方案

   https://stackoverflow.com/que...

   https://stackoverflow.com/que...

   经过XMLHttpRequest能够解决这个问题，如下是代码

   var xhr = new XMLHttpRequest();
   xhr.onload = function () {
       var url = URL.createObjectURL(this.response);
       img.src = url;
   
       // here you can use img for drawing to canvas and handling
   
       // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
       URL.revokeObjectURL(url);
   };
   xhr.open('GET', url, true);
   xhr.responseType = 'blob';
   xhr.send();

2. 这个问题出如今上传图片时，以下的这种设计体验

   

   一个input放在最上边，值得注意的是在IE中input的type为file的表现为左半部分点击为选中并显示光标，而点击有半部分才为选择文件操做，因此外套label来触发input的事件，而把input定位在区域外使其没法被选中。呀，扯到别处了。说那个层级问题。当时忘记截图了，将就着看吧。
   从上到下有三个子级，分别为label,p,img，层级则是由大到小，可是label在360中检查元素却没法被直接选中，多层时直接选中的层为较高层，因此也就点击不到。哪位coder知道问题所在的但愿能够不吝赐教，而我最后给个人解决方案是给label的样式中加入background: rgba(0, 0, 0, 0.02);，很神奇呢，偶然发现的，并且用transparent不行。
   好了，废话很少说，就这么多了。碰到过同类问题的coder，若是知道详细的缘由或者有更好的方案但愿能够告知，先行感谢。