IE8災難來了,設計師吐血了

Untitled-1

有客戶已經開始使用IE8 (好羨慕…貴公司好有錢...電腦得先跑得動Vista才能安裝IE8的)。

網頁設計師要驚慌了,萬一客戶來幹譙說在IE8下有地方跑版了,又要改到死。

不過,最終極快速的解決方法(該站連不上只有頁庫存畫面)轉貼於此:

嗯,應該說IE8 CSS Sxcks。

不要耗費精力去跟IE8 CSS搏鬥了…,直接加入meta data讓IE8以IE7模式顯示比較實在!

將下面這行放入HTML head標籤中,意思是告訴IE8瀏覽器我要用IE7模式來顯示頁面:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7″ />

如果你有興趣跟IE8好好搏鬥,那也可以加入下面這行明確告訴IE8瀏覽器我要用IE8模式來顯示頁面:

<meta http-equiv="X-UA-Compatible" content="IE=8″ />

至於IE8的CSS Hack就利用米字號吧「*」,*屬性:值,IE7以下都會吃,但IE8不理。

微軟官方說法則是這樣:如何立即修正我的網站?

如果網站是自架的,設定Web.config檔案,也能達到自動讓網頁告訴客戶端瀏覽器都以IE7模式瀏覽,更是方便快速。

若這樣做好像很沒格調,死硬派(hard-core?)的設計師就是要針對各家瀏覽器寫完美的CSS hack,那就來看看這位歪果仁美女網站最新的CSS支援一覽表(90 CSS Properties, Values and Browser Support) ,然後可以瘋狂地寫到死…寫到天荒地老…

等等…好像有些弔詭的事情。

那Firefox和其他瀏覽器怎麼辦?


會有這篇文章的誕生,一來是客戶真的提出問題,二來這case是由公司的HTML/CSS新手D所負責與撰寫,所以我就擔起除錯、解決方案諮詢的責任。D採用了X-UA-Compatible作法,耶!真的在IE7和8都沒跑版了,可是Firefox卻出問題了。
其實,您應該讀一讀這篇的:Please don’t X-UA-Compatible me like that
然後再痛心地看這篇:Meta Madness
為何FF會跑版,我還沒深入研究,我會覺得是D最基本的web標準沒掌握好的關係,倒不全然是那tag害的。可是這讓我深入思考,市面上瀏覽器何其多,Firefox、Safari、Chrome…大家卻無法發揮力量去要求IE「盡量」符合W3C標準,卻反過頭接受肥大的IE8(因為要向下往IE7、IE5相容)還使用只有IE8看得懂的X-UA-Compatible。這樣下去,IE永遠只會找網頁設計師的麻煩。

安全性有問題?

IE8為了安全性問題,不再支援CSS expression(←這怪物本來就非W3C標準),但是…因為IE8出現的如此措手不及,微軟自己也提出那套「嗨,我是偽IE7」模式讓網頁設計師前仆後繼地轉告這個快速解決跨瀏覽器版本的方案,知名大站也採取了同樣作法,網路駭客就開始暗自偷笑:誰在看我的噗?第二回:IE執行模式 vs 跨網站腳本漏洞(XSS),以meta X-UA-Compatible來作為滲透方法之一。雖然有javascript的配套措施防堵漏洞,安全問題永遠擾人。
去年我為了解決png無法在IE6保持透明的問題,上網搜尋解決方案,CSS expression就是方案之一,幸好,我打死都不想用這個作法,另外找了能維持W3C標準的替代方案,不然多年後的今天,IE8蹦出來,不再支援expression,我又要回頭修正網頁?而這也延伸出另個問題:

「你們應該義務(=free)把我網站調成跨瀏覽器的啊?」

這是客戶的心聲,說出來只會讓我滴血。產生網站的當下我當然會盡量顧慮各大瀏覽器的相容,就算跑版也不能太離譜,可是計畫趕不上變化,IE7都還溫溫的,IE8就熱騰騰出爐了。有些結案的case就會回籠要求修正,免費修也是多少耗費工時,收費又好像說不過去…非‧常‧尷‧尬。因為我比較怕死又懶,向來少用CSS hack或少見的tag,所以回籠修改的地方並不多…但是那些只會操作Dreamweaver卻不懂網頁標準的設計師會落得怎樣的下場呢? 無法想像了。我只替他們心痛,因為台灣的教育環境就是教導軟體操作而已,學完就變成連html tag都不熟的網頁設計達人,真是奇蹟式的教育啊…

結論

技術上的解決方案在網路都有淺顯的說明,但這都只是表面。就像捷運內湖線和木柵接通後,相關人員很天才的把車廂換成小的,很聰明的讓兩段不相容的系統能串連,結果忽略都市成長與人口變化(《荒謬捷運大現形》),通車後反而抱怨連連。在使用這些技術時,請思考一下它對未來的影響吧!不然我們就像黑心商人,賺黑心錢,把微軟巨獸養得更巨大,永遠高高在上不屌什麼W3C標準。

留下回應

Leave a Comment.