網頁開發人員的IE9相容性須知

IE9正式版已經在2011/3/14 21:30 UTC-8發佈囉! (補充參考: 蘇老的IE9安裝介紹)

這次從IE8到IE9的改版，主要著眼於對HTML5與CSS3的支援(雖然我覺得對CSS3支援得不夠用力)、砍掉重練變快很多的全新Script Engine，以及整合GPU硬體加速功能，在Script執行與圖形處理速度的提升十分驚人，IE9網站上有段炫耀用的小魚影片，IE9對上Firefox 4，放250隻小魚在魚缸裡亂竄的FPS測速(Frames Per Second, 每秒鐘可以刷新幾次畫面)約為59:7，圖形處理效能推進到這種水平，預期將可衍生出許多原本不可能實現的網頁應用模式。(有種不祥預感，客戶快要開始胡思亂想，提出一些異想天開的需求了... orz)

隨著IE9正式版開放下載，網頁設計人員也必須正視現有網站對IE9的相容性，部分從IE8換成IE9的行為改變可能導致原有網頁寫法產生不同結果，MSDN上有份的Internet Explorer 9 相容性操作手冊(我建議看英文原版，內容更完整)，列出從IE8到IE9有哪些變更可能影響網頁運作，值得開發人員參考。

我檢閱了一次，整理摘要如下: (以下主要針對IE8 -> IE9的變化，不含IE6/IE7 -> IE8間的差異)

1. 不再支援document.createElement("

")這種直接帶入HTML Tag的寫法，必須先createElement("div")後再加料
2. 寫法在IE9中，window["x"]會傳回OBJECT與EMBED元素的集合，原本IE8會忽略Fallback用EMBED，只傳回OBJECT。
3. 對Web Server傳回Response Header的text/css, text/plain, X-Content-Type-Options: nosniff處理原則改變。
4. 不支援arguments.caller屬性
5. 網頁中如有
6. var fn=document.writeln; fn("

")的寫法會出錯，需改成fn=document.writeln.bin(document)或fn.call(document, "

");
7.

, document.getElementById("x").myAttr在IE9將傳回undefined，需回歸使用getAttribute("myAttr")。**這點值得特別注意**
8. IE9在iFrame自DOM移除後，iFrame window會立即被移除(避免持續佔用記憶體)無法再被存取，若試圖執行其中的Javascript Function，會出現Can't execute code from a freed script錯誤。
9. IE9的User Agent字串會變成:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
網站如果有依UserAgent資訊做差異化處理時要考量此變化。
10. 不再支援動態VML(不知道這是啥的人就直接略過囉，XD)
11. for (var p in obj)的列舉結果與IE8不同，
例如: var obj = {first : "prop1", second: "prop2", 3: "prop3"}; IE8列舉結果為first, second, 3，IE9則為3, first, second，數字優先。var obj = { first: "prop1", toString : "Hello" }，在IE8只會出現first(因為toString名稱與內建方法相同)，而在IE9則會得到first, toString。
12. IE9預設會使用Streaming SIMD Extensions 2 (SSE2)加速運算，若平台支援SSE2，某些浮點運算結果會因此有細微差異。例如: Math.sin(6.28318530717958620000); IE8=>2.4492127076447545e-16, IE9+SSE2=>2.4492935982947064e-16
13. 泰文及東亞字型可能會變小! 先前IE8在處理9pt以下中文字型時會自動放大，IE9則力求原汁原味向其他Browser看齊，所以...
14. 間接呼叫window.eval，如: var indirectEval = eval; indirectEval(...)，會在全域執行，故無法取得區域變數(Local Scope) (但會這樣搞的人應該不多吧?)
15. IE8 Array的數目若超過2147483647，會以負數表示，例如: arr["-2147483645"]，IE9則不會。(誰會搞這麼大的陣列呀?)
16. Overlapping Elements Are Cloned (坦白說，不管是中文翻譯或是英文原版，我都沒看懂, 有人知道的話請分享一下。原文)
17.

…

的寫法要改成

…

18. styleSheet.title在IE9裡變成唯讀不能修改
19. Table物件行為改變:
* tBody中額外的thead, tfoot將不再顯示
* 的顯示順序: thead -> 非tfoot -> tfoot
* rows屬性傳回所有(含thead, tfoot, 直接隸屬的)
* getElementByTagName, HtmlElement.children不傳回comment node
20. IE9調整了圖形排版尺寸規則以求與他家瀏覽器一致，簡單來說，有些字型大小會與IE6/7/8不同，最常見的影響是會產生非預期的換行。
21.

Text

中的空白在IE9中會被保存，="\n Text "，而在IE8中原本為"Text"。用個範例:

Text

Text

IE8會得到:
t1=Text
t2=Text

IE9則是:
t1=
Text
t2=Text

22. attachEvent、detachEvent、createEventObject、fireEvent這些IE獨創的玩法被標成"過時不建議使用"，未來將會被移除，請大家乖乖改用W3C標準做法addEventListener、removeEventListener、createEvent、dispatchEvent取代之。