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，若是知道詳細的緣由或者有更好的方案但願能夠告知，先行感謝。