網頁開發人員的IE9相容性須知
7 | 26,490 |
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>
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
# 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...有問題急求幫忙!