IE6的Banner問題 － Finally,暫時解決啦~

　　在幾百年前小的曾經向各位報告過本格在IE6(or 更舊版)上顯示的問題, 除排版會跑掉以外其餘最破壞整體美感的應該算是橫幅透明背景變白底的情形(如上圖), 主要是因為該橫幅圖片用了PNG的透明度功能, 然而舊版IE(6 or以下)的image標籤功能並不支援該透明度功能, 所以透明背景部份會變成一塊白白的實在很難看, 然而從Google的統計中顯示, 使用舊版IE瀏覽器的用戶所佔比例還真的不低, 因此在怎麼樣也得把背景搞到透明才行(註：我的考慮範圍是IE4~6)。

　　由於我記得舊版IE並不是完全不支援PNG透明功能, 於是打算用濾鏡的方式讓IE正常顯示, 但是翻了翻有關IE濾鏡的東西, 發現IE4、5、6各版的PNG透明濾鏡語法都不一樣(囧), 而且濾鏡語法又有夠麻煩的(而且那應該屬IE Only的東西吧?)　所以打消了用濾鏡的念頭。

　　除了PNG以外, 支援透明度又被廣泛使用以及支援的大概就屬GIF莫屬了, 所以我一開始打算用JavaScript的方式先辨識瀏覽器種類再用document.write寫入Banner的img標籤(在沒有JavaScript環境則直接用noscript標籤放PNG圖), 但是詭的是這樣子寫的話在Konqueror底下Banner會顯示不出來, so 最後才想到在HTML中預寫PNG的images標籤, 用JavaScript檢查瀏覽器如果是舊版IE的話再把圖片替代掉, 繞了一大圈如此一來這問題才算是暫時宣告解決。不過這麼做也有一些缺點...
　　首先, GIF只能用索引色彩, 而索引色彩最多只能用到256種顏色, 雖然可以做最佳化, 但還是不夠用, 所以整個Logo的顏色便顯得很殘... :x 跟原本的PNG比起來效果實在是差太多了(如上圖左邊是IE6用GIF顯示, 右邊則是K-Meleon1.1用PNG顯示), 另一點就是GIF雖然支援透明背景, 但不支援影像Alpha, 所以Alpha的效果也是整個都不見了。

　　另外由於這是用JavaScript判斷是IE6才換GIF圖, 所以基本上要是IE的JavaScript被停用(IE6的JavaScript好像不能停用?)則這道措施也是等於沒有, 但要是換過來的話這樣像Firefox有裝NoScript的狀況又不能因而就這樣斷送那些支援PNG透明瀏覽器的品質...so 也只能犧牲IE6了(畢竟IE6 以下不在支援範圍內)。

　　雖然這麼做解決了Banner的問題, 但是有些部份IE6的Trident引擎會排到跑掉還是沒辦法, 所以我還是保留了警告訊息, 要支援舊版IE還真是不容易....

偵測到使用舊版IE時會出現的警告訊息：

提醒您!依據您的識別資料顯示, 您可能正在使用Internet Explorer 6.0瀏覽器, 但已知該瀏覽器太舊以致於無法正確顯示本站內容, 強烈建議您升級或更換您的瀏覽器, 詳細情形與解決方法參見 這裡 。