IE兼容BUG匯總及解決方案(持續更新)

本篇為總結開發過程當中遇到的各種IE兼容性的小問題，比較復雜的會單開一篇文章來講解。

另：我手頭目前只有原生IE8，原生IE9，原生IE11，以及IE11模擬的IE5,7,8,9,10。因IE6太過古老而不再進行測試。

 

無法使用jquery的outerHTML的方式創建含有href屬性的a標簽（IE5-8）

問題復現：

typeof $("<a href='xxx'>").get(0);//IE7-8:"undefined"
typeof $("<a href='xxx'>").get(0);//標准瀏覽器:"object"

影響瀏覽器：

測試	模擬IE5	模擬IE7	模擬IE8	原生IE8	模擬IE9	原生IE9	模擬IE10	原生IE11
!!$("<a href='xxx'>").get(0)	N	N	N	N	Y	Y	Y	Y
!!$("<a>").attr("href","x").get(0)	Y	Y	Y	Y	Y	Y	Y	Y

解決方案：

typeof $("<a>").attr("href","xxx").get(0);//IE8 "object"

使用Date對象來構造新Date對象導致毫秒值丟失(所有IE，火狐)

詳見——FireFox和IE下使用Date來構造新Date對象的BUG

IE下console對象報錯

詳見——讓IE兼容console——“由於出現錯誤80020101而導致此項操作無法完成”的解決方案

IE8下congsole.log的typeof為object

詳見——IE8下的typeof(console.log)為"object"的BUG

IE8下Event.button的值與標准瀏覽器不一致

IE8以下的所有鼠標事件(mousedown,mouseup,click等)的event.button的值與標准瀏覽器不符，測試只在IE8-中出現。

問題復現：

$("body").mousedown(function(e){
    console.log(e.button);//各瀏覽器不一致
})

影響瀏覽器：

e.button值測試	IE5	IE7	IE8	IE9	IE10	IE11	火狐	谷歌
鼠標左鍵	1	1	1	0	0	0	0	0
鼠標中鍵	4	4	4	1	1	1	1	1
鼠標右鍵	2	2	2	2	2	2	2	2

解決方案：

使用jquery的e.which屬性（1：左鍵，2：中鍵，3：右鍵）可以實現誇瀏覽器的一致性

同時在jquery1.9.1的源碼中可以找到對此問題的兼容解決方案

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && button !== undefined ) {
    event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
}

 

IE8下超過31個link style標簽后失效

在IE8下最多僅允許31個link style標簽，按照在HTML頁面中出現先后順序，從第32個style標簽起，及以后的都無效。

解決方案只能發布前做標簽合並，再發布。