幫忙看了一個問題,某個大家已經檢視無誤的網頁,在某位同事檢視時,發現所有的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後,天下太平!


Comments

# by dyco

之前也遇過同樣的問題 是IE6 FrameSet 將FrameSet切成上下二半,上半部為100%,下半部為0 將上半部的ScrollBar快速上下拉動 會發現畫面有被破壞的情況 在IE7則不會

# by Billy

新增一個網頁,內裡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 後,問題解決。

Post a comment