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("<div id='myDiv'>")這種直接帶入HTML Tag的寫法,必須先createElement("div")後再加料
  2. <object id="x"><embed id="x" /></object>寫法在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. 網頁中如有<svg>,過去IE8會交給SVG外掛顯示(如: Adobe SVG Viewer),IE9改由原生(Native,內建)SVG功能直接解析處理
  6. var fn=document.writeln; fn("<div />")的寫法會出錯,需改成fn=document.writeln.bin(document)或fn.call(document, "<div />");
  7. <div id="x" myAttr="blah" />, 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. <html xmlns:myNamespace>
        <?import namespace="myNamespace" implementation = "my.htc">
        …
        <myNamespace:calendar/>

    的寫法要改成
    <style>
    .calendar {
    -ms-behavior: url(my.htc);
    }
    </style>

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

# by Hina

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

# by RSChiang

Overlapping Elements 是指 <b><i></b></i>之類重疊的元素吧。一直是個問題...

# by Hina

@RSChiang: 您說得應該是正解(我把他想到 Layout 那邊去了 T^T

# by ChaN

「有種不祥預感,客戶快要開始胡思亂想,提出一些異想天開的需求了」 大推 XDDDDD

# by 路乙

請問版主何謂 「打地鼠模式」?

# by chainchung

冒出一個打一個, 有人回報BUG就修, 沒人回報就當做沒事 :D

# by 網友

請問你有沒有MSN...有問題急求幫忙!

Post a comment


48 - 15 =