抱風伴靜 Memostorming

留下您的回應，或將本文收藏到

© 風痕影，採用「創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款」授權。

讓我們靜默三分鐘，哀悼IE6之死，然後開懷大笑。

這張圖來自《Mr.IE6》－－16日Even Wu（喔喔喔他新網站好棒！）跟我說他做了這麼一個網站：

只要是網頁設計師，看到這張網頁應該都會歡欣鼓舞吧XD？除非你是IE派。

IE6是網頁設計師的公敵

對網頁設計師而言，難的不是將圖案化為網頁，而是在化為網頁的同時考慮「瀏覽器相容性」，這是每個瀏覽器對CSS支援程度不一，即使支援解讀也不相同所致。

基本上，如果你都是按照標準去思考的話，用Firefox等瀏覽器去看是沒啥問題的；IE7、8也還好。最大的問題就是較古老的版本IE6，它的顯示實在是令人頭大；排版越複雜時越明顯。就拿我這次設計的網誌來說吧！這次的排版十分複雜，所以我得為了IE6多寫百行CSS才能弄成這個樣子：

如果你用Firefox，看起來會是這個樣子：

看起來幾乎一樣，對吧？正如《兔眼看天下‧救救設計師！請拋棄Internet Explorer 6》所言，之所以兩邊會這麼像，其實是因為我費了很大的苦工去多寫CSS；仍然不一樣的地方，是受到IE6的限制，無法達成，例如：白色那塊「首頁目前顯示的文章」無法往左延伸，因為在IE6下會被文章區蓋住。

如果我不多寫這上百行CSS，IE6其實看到的會是這個樣子：

我來解釋一下會變成這樣的原因（因為太多了，只說幾個比較顯眼的）：

• 貼紙往左移是因為IE6對margin的算法不同
• 側邊欄往下掉是很常見的問題，之前當無名客服時常常看到有人問；現在無名增加了資料夾寬度設定也是這個原因：IE6會讓區塊在塞不下東西時變寬，導致區塊本身被擠掉。除此之外，兩個緊鄰的區塊寬度加起來等於100%時（例如70%, 30%），IE6也會認為塞不下，但其他瀏覽器不會
• 貼紙背景變灰色是因為：除非使用濾鏡，IE6並不支援PNG的alpha channel；白話來說，就是IE6不支援PNG檔的半透明效果。你現在如果用IE6還看得到這效果，是因為我加了濾鏡

還有，因為IE6本身對CSS選擇器（selector，有些人把它稱為CSS的「標籤」）的支援不佳，我必須多加幾個ID才能讓樣式在IE6上正常；其實應該要盡量少用ID的－－現在，你知道我們為什麼討厭IE6了吧？

說實在的，IE6的使用者愈趨減少，其實是可以像兔眼那篇底下有人說的「消極支援」－－IE6只求看得到，並附上升級資訊。可是可能是我月處的個性使然吧？很追求完美，才會盡量使它看起來也類似；即使我自己還看得出差別，但風若維都說已經夠了，對她來說根本已經是「一樣」了XD。

那篇文章裡還附了一個外國的活動《SAVE THE DEVELOPERS》，可惜網址savethedevelopers.org似乎沒有續約；簡單來說，這活動就是要大家別用IE6，好救救我們這些網頁設計師。

IE7, 8的顯示比較接近標準，所以問題小多了。

用各版本IE來做測試

為了測試瀏覽器相容性，網頁設計師有時得裝一堆瀏覽器，但IE的各版本無法在電腦上共存，所以有人想辦法把IE7, 8弄成免安裝的樣子。IE7我看到的作法是把微軟的安裝程式直接解壓縮，再用一個MS-DOS批次檔去執行它，並把IE7所需的登錄值登錄進去；成功啟動後把登錄值移除，免得IE6無法執行。

後來他們又出了一個叫Multiple-IE的東西，內含所有版本的IE；但我系統裡安裝的依然是IE6版本，所以不適合用這個。今天去看，發現他們已經做出使用執行檔的IE7免安裝版，也在《Dearest》這個網誌（設計得不錯喔！）找到了IE8的免安裝版。

後者好像是把IE的相關設定改存在放置主程式的目錄裡，甚至在執行時不會出現批次檔的視窗，還解決了在沒安裝的情況下功能不完全而無法測試某些東西的問題，例如：會被認為要彈出視窗而擋掉的JavaScript。前者則依然有些問題，例如：每次啟動都會要求設定自訂項目，即使用Installer版也是一樣。

以前我沒用過IE8，現在發現它也支援「搜尋引擎」的<link rel="search">標籤了！

不過它要求的格式好像又和Firefox, Opera不同，加了也不能用；看來以後我得在伺服端根據user agent判斷瀏覽器來源，送出不同搜尋引擎了XD。

另外，網址列也變得和Google Chorme很像，會把域名標成黑色，其他部分標成不顯眼的灰色：

不過Chorme是會連主機名稱hit1205一起標成黑色。

IE8也有些問題

我的網誌在IE8下是正常的（它讀到的CSS會和Firefox的一樣）；不過當我往下捲的時候，卻發現文章連結網址的<input />不知怎地，裡頭的文字編輯區域特別窄，不會充滿整個文字方塊耶！

今早同梯峯哥（又稱冏哥）問我推薦啥製網軟體，因為他覺得老師要求的MS FrontPage很難用，當下我就推薦了Dreamweaver。不過他想用卻找不到的框架或內嵌框架在Dreamweaver和FrontPage裡的難找程度應該是差不多的。

平常我用的其實是EmEditor：這是純文字編輯器，但還是會幫程式碼標上色彩。說真的，習慣了以後，你反而會覺得某些東西用現成的軟體反而很難做，自己打還比較快咧！

他說以前很鄙視用Firefox的人，理由是「那是不正規的」；不過最近用IE8後他開始想跳槽了－－照他的說法，IE8也有些IE6有，IE7消失的問題：捲動之後東西不見、文字跑到奇怪的地方去。上面那個Dearest說的「不支援PNG」也讓我覺得很怪－－查了以後發現《猫闷》說，有時連GIF檔也會出問題，而問題的原因竟然是有登錄值沒有登錄＝　　　＝！

突然很想推峯哥的那句話：「真該建議微軟把自家的OS搞定就好」XD。

難怪維基百科現在有個新條目〈對Internet Explorer的批評〉；不過裡頭的<font face="...">被他寫成<font name="...">了，而且這範例好像也跟他描述的東西不大一樣。

對了，很想自誇一下，這次在聽他描述網頁問題時，我又感受到龍貓說的：即使說得很模糊，我還是一聽就懂：

• 「我要讓別人連上我的網頁除了給他我的IP還可以有啥方法？」被我解讀成想讓網址對應到某個IP
• 「要在同一個網頁上，例如旁邊有可以點的東西」，還沒說完我就猜到是說框架／內嵌框架了XD

這種情況在別人問網頁問題時尤甚，不知是不是在無名當客服時造就的能力呢？

用Firefox體驗IE8新功能

之所以知道那個「救救網頁設計師」的活動，是從MozTW的愚人節玩笑看來的；不過也有人在論壇裡說這個玩笑很不好：在愚人節那天，MozTW的首頁頂端成了類似微軟的Moztwsoft，還大剌剌地寫著「立即體驗Internet Explorer 8最新功能」，且襯以微軟的標準藍色背景。

點進去後，才發現這是愚人節玩笑啦！裡頭介紹了Firefox 3與IE8一樣的功能，說你如果用過Fx的話這些功能早就體驗過了；左下角還列出擴充套件Firefox Activities，裝了以後好像可以用IE8才能用的加速器？

而在網頁的右下角，就列了我剛說的那個活動。

部落格觀察的愚人節玩笑

說到愚人節玩笑，往年部落格觀察會在愚人節當天讓所有人的名次都變成第一名，讓人開心得要命（當然也有人以為是壞掉了）；今年也不例外：

老實說，這次我真的被騙到了；想說最近名次才剛進步到200名左右，怎麼會突然晉升到41呢？

這次的玩笑最大的不同：名次不再是統一的，而是根據區段而有所不同：

當名次小於41時，除非是第一名，否則全都會變第四名；大於41後，就成了41名了。後面更多的名次也有不同的數字，但我仔細一想，全都是4和1的組合，也等於在暗示愚人節這天吧？算是個很認真的玩笑。

這次依然有使用者被騙了；我擔心他著急，又怕破梗，便決定如此回覆：

您好，這個問題正在處理中，今天過後就會恢復正常
目前發現的問題原因，請看這裡： http://0rz.tw/c01c0

那個縮網址連過去會是維基百科的〈愚人節〉條目XD。

幽默的Google Chorme

不用等到愚人節！Google的服務有不少有趣的句子，例如Gmail的垃圾郵件夾是空的時候，它會喊著「萬歲！一封垃圾郵件也沒有！」而最近網路上也很常見到Google Chorme瀏覽器的幽默情事：

• 出問題時會說「不得了！Google瀏覽器已經損毀。要重新啟動嗎？」
• 移除時會說「是不是我們講錯什麼話惹您不開心了？」
• 重灌狂人的瀏覽器在網頁沒回應時會嘔吐（其實是凍到發抖，底下的東西是圍巾）

16日那天我發現，Google瀏覽器的「無痕式視窗」其實也有小幽默在裡頭：

看到了嗎？無痕式視窗不能阻止「站在您身後的人」偷窺喔XD！

未考慮IE以外瀏覽器的問題

Jedi大哥曾說，某校的錄取名單沒有真的讓個人隱私資料不輸出，而是隱藏而已。由於他網誌現在進不去，我只能憑印象描述：那隱藏的方法似乎只有IE認得；一旦改用其他瀏覽器，地址、身分證字號全都錄！

當然，更正確的作法應該是連輸出都不要輸出，不然看原始檔還是會看得出來的。

阿生在17日也給我令人發噱的《程式設計 遇上 小提琴‧使用IE的同學開學日是16號，使用FireFox則是28號開學》。這文章的例子是學校行事曆使用MS-Office軟體製作，並直接轉存為網頁。他在製作表格的時候，並沒有把每個日期用不同列（row，大陸譯為「行」，就是<tr>）來分開，該月的所有日期和所有事件，完全就扔在同列的相鄰兩欄（column，大陸譯為「列」）裡，用段落（就是<p>）來對齊。所以，在不同瀏覽器下，該段落的文字因為過長而換行，接連導致日期與事件對不齊的窘境。

老實說，這種設定就連在IE也可能出問題；如果使用者只放大文字，而不放大版面的話，還是可能會出差錯的！

完全照著IE6瀏覽器的解讀來做網頁，往往在其他瀏覽器上會變得十分詭譎；這在用表格排版的時代還好，看起來都差不多－－現在改用<div>與CSS來排版，問題可就大了。在我接觸網頁標準以前，總以為這是其他瀏覽器的問題，而有些IE專有的擴充特性（「擴充」是指不在W3C網頁標準裡的東西，「特性」則譯自property；有些人把它稱為CSS的「屬性」）失效後就以為其他瀏覽器很爛，後來才知道其實IE6的解讀才是比較差勁的。

嗯，更正確的說法，這擴充應該是屬於Trident的－－這是IE的網頁描繪引擎。

不過，我本身並不排斥使用擴充特性，就連KHTML（Konqueror、Google、Safari等的描繪引擎）、Gecko（Mozilla、Firefox、Flock等的描繪引擎）也都有自己的擴充特性，只是在用的時候得要記得：它在其他瀏覽器上會失效。所以，如果某些效果是必要的，那我絕對會用標準的方法來製作。

IE不是網路，更不是上網的代名詞

還有一種比較有趣的問題，就是IE因為附在作業系統裡，所以在市佔率極大的情況下被人以為是唯一的瀏覽器；我想峯哥也是這原因才把其他的視為「不正規」吧？甚至，許多人根本不知道「瀏覽器」這個詞是什麼意思，也不知道IE, Internet Explorer這些名稱，只知桌面上有個「藍色的e」。

那個e，似乎已經成為「網路」的代名詞了；許多地方甚至用IE的商標，或類似的圖形來代表「網路」。

03月17日那天，在MozTW討論區看到kakeru發表的〈IE Only賣場〉，真是令人絕倒！原來，在某間家樂福的牆上，把「無線上網區」給翻譯成了「Internet Explorer Area」，跟以前臺南車站的「Bake the cellphone」（烘手機）、大陸某間餐廳的「Translate server error」有得拼！

上面這張照片是取得他同意才貼過來的；話說他email回得可真快，嚇到我了XD！

剛發現kakeru其實就是《永藍》的站長，可惜那網站不在了（但他有網誌）更正，我發現網站還在，而且他竟然有連結到紘廣大哥的網誌，世界真是小。記得以前他在裡頭寫過一篇諷刺微軟的文章，說以後如果開餐廳會如何。裡頭最令我印象最深的話是：「記得！在結束前，先按『開始』。」

今晚我把「Internet Explorer Area」拿去搜尋，竟然給我找到臺北縣平溪國小的英文網頁，裡頭寫著：「All the campus is wireless Internet Explorer area.」呃……「無線」是翻出來了，可是「網路」還是被翻成IE了啊！（翻桌）剛才找了一下，「全校無線網路」更簡單的翻法是「campus-wide wireless network」。

大家來送終：Mr.IE6的Twitter

回到首段所說的《Mr.IE6》－－這網站除了頂端是IE6的墓碑外，底下還列了落落長的Twitter，全都是送給IE6的哀悼之詞。如果你也想來送終，只要在Twitter上follow MrIE6就可以囉！

「玉山新版網路銀行只支援我，真貼心」XD。

說實在的，Even Wu為了做這網站，還得買網址，其實挺麻煩的；現在，只希望IE市佔率節節下滑，真正地走入墓碑！聽說上個月IE的市佔率已經從2004年的92%跌到67%囉（IE6是18%）……

（卡巴好像會把這個市佔率網頁當成廣告，請加到白名單）

留下您的回應，或將本文收藏到

© 風痕影，採用「創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款」授權。

death of ie6