IE 相容模式 - 魔鬼還是天使 - 頁面又壞掉了

IE 相容模式 - 魔鬼還是天使 - 頁面又壞掉了

每當我接到電話或者是PM和我說:「Alan那個xxx版型怎麼跑掉了」或者說:「那個xxx的頁面連接(Ajax 連接)怎麼點下去頁面只顯示圖和文字而其他部份都不見了」?

通常我會問兩個問題:

  1. 你是不是用IE?
  2. 請問你的IE版本是多少?

通常來說,對方都是使用IE,而如果使用的是IE7,我只能在心理呐喊:「天哪、拜託可不可以升級或換瀏覽器啊」然後用客氣的口吻把心理想的和對方溝通。如果不能換,那我只能拿掉一些比較新技術的東西,例如Ajax、CSS等。

不過有時候我會遇到對方用的是比較新的IE,IE8以上,但是對方再使用網站會有問題,例如,點下ajax連接竟然直接顯示Ajax內容而不是更新到頁面某一個位置,或者Css整個跑掉,甚至頁面空空的因為瀏覽器看不懂某個JS Framework。這些其實讓我頭痛了不久,因為在我電腦同樣的IE明明就不會啊?

後來我終於找到了解法,也終於弄懂到底是怎麼一回事,原來是IE的「相容模式(Compatibility View)。(如果對接下來內容不感興趣,或者急需知道答案,請直接卷到最後)。

和為IE相容模式

在早起IE8之前,那個時候IE瀏覽器還屬於比較獨大的情況,那個時候他有很多東西是和網路的Standard不太一樣。譬如他有自己才看的懂得自定義Tag。作為那個時代,很多網站都是以那個時候的IE作為目標瀏覽器去寫的網頁。

隨著時間的進步,微軟意識到自己搞自己的是不行的,需要跟Web Standard一樣,慢慢的以前那些舊的只屬於IE有的東西就在新的IE裡面沒有了。

但是爲了以前瀏覽器而設計的網站要怎麼辦?他們就處於很尷尬的局面,因為如果不支援很多舊網站除了會跑版以外最要命是有些功能都會有問題。

爲了解決這個問題,微軟在IE8以後很佛心的加入了所謂的相容性模式,也就是能夠在舊的網站使用相容性模式瀏覽,而一切正常,而到比較新的網站就用正常模式瀏覽。

聽起來很棒,有問題的舊網站使用IE 相容模式,新網站使用正常模式。但是這個有一個前提,那就是使用者要知道相容性模式的意義和如何切換

相容性模式如何變成問題

假設今天我用相容性模式瀏覽一個比較新的網站,會發現有很多問題。首先,很多Jquery的東西都會怪怪的,像Ajax就不起作用了,或者一些JS UI Framework就完全毀掉了。

那你或許會說,就不要開相容性模式不就好了?但問題是很多使用者不知道這個,而你和他介紹他也不一定聽得懂。而最大的問題是,相容性模式這個東西是可以設定說一直開啟。

在一些公司裡面,相容性模式是預設開啟的,意味著他們瀏覽很多網頁都是處於那種狀態,而使用者不一定知道如何把它關掉。

微軟的解決辦法

微軟在這一篇有提到關於如何解決相容性問題。他說,首先網頁一定要設定docType,如果不設定,就會以Quirks mode(IE5)瀏覽。

但問題是如果使用者設定使用相容模式瀏覽,就算有docType他也會以相容模式瀏覽,那該怎麼辦?

微軟因此說我們可以加一個metatag告知要使用的IE版本,而也是使用這個就能夠強制不要使用相容模式瀏覽。

<meta http-equiv="x-ua-compatible" content="IE=edge">

那個「IE=Edge」表示使用目前IE最新的正常模式去瀏覽。當然,你也可以指定要使用哪一個版本的IE去瀏覽。

加上Chrome=1

我在網路上搜索的時候,發現有些人會在最後面加上Chrome=1,變成:

<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">

好奇的去搜索了一下,發現到StackOverflow也有人問了相同問題,才發現原來Chrome有一個IE Add on叫做Chrome Frame,而作用就是在IE內使用Chrome來顯示頁面,這樣老舊的IE就可以瀏覽一些新的頁面也不出問題,而那個Chrome=1就表示如果有裝,就啟用。

結語

其實微軟弄出相容模式還滿聰明的,不過就像人們常說的:「有一好,就沒有兩好」,它帶來的衍生問題如果沒有遇到過還真不知道爲什麽頁面會出問題。不過,現在網路發達,基本上都可以搜索的到,這一篇只是我自己的總結而已。


Google+

創用 CC 授權條款
Alan Tsai 的隨手筆記Alan Tsai製作,以創用CC 姓名標示 4.0 國際 授權條款釋出。