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，如果知道详细的原因或者有更好的方案希望可以告知，先行感谢。