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

2011-03-16 02:42 PM

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間的差異)

不再支援document.createElement("<div id='myDiv'>")這種直接帶入HTML Tag的寫法，必須先createElement("div")後再加料
<object id="x"><embed id="x" /></object>寫法在IE9中，window["x"]會傳回OBJECT與EMBED元素的集合，原本IE8會忽略Fallback用EMBED，只傳回OBJECT。
對Web Server傳回Response Header的text/css, text/plain, X-Content-Type-Options: nosniff處理原則改變。
不支援arguments.caller屬性
網頁中如有<svg>，過去IE8會交給SVG外掛顯示(如: Adobe SVG Viewer)，IE9改由原生(Native，內建)SVG功能直接解析處理
var fn=document.writeln; fn("<div />")的寫法會出錯，需改成fn=document.writeln.bin(document)或fn.call(document, "<div />");
<div id="x" myAttr="blah" />, document.getElementById("x").myAttr在IE9將傳回undefined，需回歸使用getAttribute("myAttr")。**這點值得特別注意**
IE9在iFrame自DOM移除後，iFrame window會立即被移除(避免持續佔用記憶體)無法再被存取，若試圖執行其中的Javascript Function，會出現Can't execute code from a freed script錯誤。
IE9的User Agent字串會變成:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
網站如果有依UserAgent資訊做差異化處理時要考量此變化。
不再支援動態VML(不知道這是啥的人就直接略過囉，XD)
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。
IE9預設會使用Streaming SIMD Extensions 2 (SSE2)加速運算，若平台支援SSE2，某些浮點運算結果會因此有細微差異。例如: Math.sin(6.28318530717958620000); IE8=>2.4492127076447545e-16, IE9+SSE2=>2.4492935982947064e-16
泰文及東亞字型可能會變小! 先前IE8在處理9pt以下中文字型時會自動放大，IE9則力求原汁原味向其他Browser看齊，所以...
間接呼叫window.eval，如: var indirectEval = eval; indirectEval(...)，會在全域執行，故無法取得區域變數(Local Scope) (但會這樣搞的人應該不多吧?)
IE8 Array的數目若超過2147483647，會以負數表示，例如: arr["-2147483645"]，IE9則不會。(誰會搞這麼大的陣列呀?)
Overlapping Elements Are Cloned (坦白說，不管是中文翻譯或是英文原版，我都沒看懂, 有人知道的話請分享一下。原文)
<html xmlns:myNamespace>
    <?import namespace="myNamespace" implementation = "my.htc">
    …
    <myNamespace:calendar/>
的寫法要改成
<style>
.calendar {
-ms-behavior: url(my.htc);
}
</style>
…
<div class="calendar"></div>
styleSheet.title在IE9裡變成唯讀不能修改
Table物件行為改變:
* tBody中額外的thead, tfoot將不再顯示
* <tr>的顯示順序: thead -> 非tfoot -> tfoot
* rows屬性傳回所有<tr>(含thead, tfoot, 直接隸屬的)
* getElementByTagName, HtmlElement.children不傳回comment node
IE9調整了圖形排版尺寸規則以求與他家瀏覽器一致，簡單來說，有些字型大小會與IE6/7/8不同，最常見的影響是會產生非預期的換行。

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

<div id="t1">

    Text </div>

<div id="t2">Text</div>

<script type="text/javascript">

var t1=document.getElementById("t1").innerHTML;

var t2=document.getElementById("t2").innerHTML;

alert("t1=" + t1 + "\nt2=" + t2);

</script>

IE8會得到:
t1=Text
t2=Text

IE9則是:
t1=
Text
t2=Text

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

【後記】
昨天換裝IE9後，公司IE-Only的內部網站瞬間脫胎換骨，原本會小頓一下的網頁改以噴出的速度呈現，小小地感動了一下，心想從IE6到現在，已經等好久囉~~~
不過整理完上述的相容性檢核清單，倒也有了心理準備，看來會有幾顆地雷要拆(主要應會死在第7點document.getElementById("x").myAttr上)，就啟動打地鼠模式來接招吧!

綜觀這些不相容的改變，多半旨在回歸W3C規格，力求與其他瀏覽器標準一致，應該算是好事。只是對已經依賴IE6/7/8某些獨有特性而活的網頁(或開發者)會有昨是今非之感，開發人員面臨的選擇題是: 1) 改掉專屬規格向標準看齊，向跨瀏覽器前進；2) 考量現實，強制使用相容模式迴避免修改成本。若再年輕十歲，我會覺得選2)的肯定是鄉愿小孬孬，選1)才是熱血好男兒，但由於自己早是髮蒼蒼的務實老鳥，已悟出---只要能讓網站順利運作，滿足企業需求~~，又可以讓自己準時下班~~，不管1)或2)都是好選擇囉! 大家請安心作答。

Comments

# 2011-03-16 02:17 AM by Hina

Overlapping Elements Are Cloned...!!!? 意思是重疊的元素會被合併？如果我是故意讓元素在同一個父元件下，使用定位重疊？也會被 IE9 判斷為重疊元素然後合併嗎！？這一條感覺怪怪的，以前 IE 會有 hasLayout 的問題，確實是會讓父元件中的子元件產生意外的重疊（例如父元件的原生定位點在 top: 200px，然後他的子元件會噴到 top: 100px，把父元件蓋掉...）現在這個意思是這種狀況不會發生就是了？（抓頭