【茶包射手專欄】被CSS排擠的IE

幫忙看了一個問題，某個大家已經檢視無誤的網頁，在某位同事檢視時，發現所有的CSS格式設定都不見了，表格底色、字型都變成IE的預設值，感覺上是整個CSS失效。

先用Fiddler2檢視，確認CSS、JS等都下載正常，沒有發生HTTP 404下載檔案失敗的問題。為什麼大家看到的網頁都正常，只有這台機器被排擠呢?

遇到這種"眾人皆好我獨爛"的金包銀情境，當務之急不是怨天尤人，而該反躬自省: 我的機器跟別人有什麼不一樣?? 比對的重點，OS/IE版本、網路設定都要留意。我發現到最大的不同點，這台機器的IE是IE6，而其他檢視正常的機器是IE7。

這時我腦中快速閃過幾個畫面... IE6與IE7在處理Encoding的原則上是有差異的，過去有遇在IE6檢視OK，IE7會出鎚的情境，也吃過js Encoding不對產生錯誤的悶虧，把兩件事串在一起: 該不會是因為CSS用了BIG5編碼?

更進一步喚醒記憶，我找回這篇完全相同問題的文章，只是當時沒有IE7混搭IE6出來攪局。

檢查了一下，果然，CSS被存成了BIG5編碼，而我們的網頁都是以UTF-8為核心。看來IE7可以自動彈性調適，IE6卻會硬用網頁的Encoding去解讀CSS。

改存UTF-8後，天下太平!

歡迎推文分享:

Published 29 October 2008 09:30 AM 由 Jeffrey

# dyco said on 29 October, 2008 03:06 AM

之前也遇過同樣的問題

是IE6 FrameSet

將FrameSet切成上下二半,上半部為100%,下半部為0

將上半部的ScrollBar快速上下拉動

會發現畫面有被破壞的情況

在IE7則不會

# Billy said on 31 October, 2008 11:13 AM

新增一個網頁，內裡import 一個CSS file，其他使用ASP.net masterpage 的網頁一直在用這個CSS File，而沒有任何問題，但這次的一個網頁沒有使用masterpage，import css 之後，用class 沒有任何反應。

Firefox 顯示正常，用 Firebug 不見任何錯誤，IE developer Toolbar 有看到class 和 background color 是有轉變的。

嘗試用Developer Toolbar 內置功能修改 background-color 依然失敗，需要出動 inline 才能成功。

最後看到這篇文章，果然發現編碼不是UTF-8，轉存成為UTF-8 後，問題解決。