目前我們相容到IE9,在寫系統的時候會遇到一些坑。這裡稍稍記錄一下。
- disabled屬性
給一些非表單節點加上了disabled屬性，在IE9下，樣式也會發生變化。
- type屬性
常常順手給dom節點，比如按鈕上加一個type="1",type="2"這樣子，在chrome下執行得好好的，結果到ie9下面getAttribute('type')或$(..).attr('type')執行不正常，除錯發現讀出來的type都是'submit'。
- event = window.event || event
最近跟蹤一個bug，event中的某些屬性讀取不到，發現問題出在這句程式碼上。當程式碼執行過去之後，window.event可能已經變了。
所以應該改寫成:event || window.event。
這種的選擇判斷，理論上都應該以高階優先原則。 先看看功能強大 的存不存在，然後再考慮低階一點的。 因為有些瀏覽器可能是高階與低階並存的。
比如document.addEventListener與document.attachEvent。
- console
以前遇到IE9下面系統無法執行，但是開啟控制檯想要除錯一下，看看問題在哪，居又能正常執行，這還怎麼玩？ 後來發現在IE9,8下面，有時候不開啟控制檯，console物件是不存在的，那麼呼叫console.log就會報錯導致js執行不下去，而一開啟控制檯console物件就存在了，又看不到bug所在了。
這個時候我們可能需要，不開啟控制檯的除錯方法：github.com/liusaint/Ja…
另外線上環境儘量不要console.log東西出來。可考慮將原生console.log封裝一下：
function log(){
if('dev' == window.environment){
console.log.apply(console,arguments);
}
}
log(1,2);//1,2複製程式碼這樣正式環境也不會有輸出。另外，為了預防其他同事潛在的console.log輸出。可以增加以下保險程式碼。當然，實際可能還有console下面的其它方法也要做處理。
if(!window.console){
window.console = {};
window.console.log = function(){
}
}複製程式碼IE9不支援flex
IE9不支援FileReader
a標籤觸發onbeforeunload事件
這個情況也不是常常會出現，要看概率。我們的a標籤即使加了javascript:void:(0)也觸發了window.onbeforeunload事件，然而頁面其實並不會跳轉。
一般考慮解決辦法是給所有的a標籤代理一下，檢測到href為javascript時，阻止預設事件，event.preventdefault();但是實際並不是麼有效果，特別是後面新增上去的a標籤。比如生成的ajax分頁的a標籤，連jQuery的on方法代理都沒什麼效果。只有每次生成分頁的a標籤後都給它們單獨綁一個click事件來阻止預設操作event.preventdefault();
- IE9 canvas跨域問題 如：canvas.toDataURL()
我們常常會遇到圖片所在的域跟網頁的域不一樣的情況。那麼使用canvas的一些方法提取編輯過的圖片資料的時候就會遇到跨域的問題。比如canvas的toDataURL()方法。其他瀏覽器可以通過伺服器配置CORS跨域加上 img.crossOrigin="anonymous"來解決問題，但IE9不行， 所以一些功能在IE9下面就需要後端來做，比如圖片的旋轉，在IE9下還是乖乖地傳個角度給後端吧。或者在IE9下面直接捨棄部分功能。
- localStorage 深坑
說出來你可能不信，localStorage在IE偶爾抽風的情況下會出現，兩個標籤頁，完全一樣的網址，讀出來的localStorage不一樣的情況。（頁面經過反覆重新整理，請不要懷疑我的操作。） 因為最近做的專案對快取要求很高，對localStorage有大量的運用，然後產生了一些奇怪的bug，才發現了這個深坑。 許多多年經驗的同事都表示從來沒遇到過這樣詭異的bug。
又要功能強，又要相容低，前端不好當啊。
先寫到這裡。