您在這裡

終於解決IE下未載入style.css造成版型「裸奔」的問題!

tky's 的頭像
tky 在 2009-08-30 (周日) 10:41 發表

在很久之前,tky就發現,在安裝了特定的模組之後,比方說Penal、Advanced forum等等,原本能夠在IE之中正常顯示版型,就會出現沒有載入style.css的檔案、讓版型「裸奔」呈現的狀況。
有趣的地方是,這個bug只會出現在IE中,不會出現在firefox或者Chrome裡頭。

當時因為無法可解,所以通常就把模組移除掉來避免這個問題。
現在因為一定得用這些模組,就開始去研究到底是哪個地方出問題。

搜尋了一陣子,在Advanced forum的issue裡頭找到了關鍵問題:http://drupal.org/node/228724#comment-772938
推測就是因為IE在讀取CSS樣式表的時候,會自行判斷長度是否過長,如果太長就會中斷載入樣式表。
解法很簡單,就是在「網站設定」>>「效能」>>「頻寬最佳化」的地方,開啟「最佳化 CSS 檔案」的壓縮功能,將所有CSS樣式表壓縮在一個檔案中,讓瀏覽器能夠一次載入,問題就解決了。

(雖然已經抱怨過很多次IE,但這次還是要幹勦它一次:這麼會有這麼蠢的設計啊?firefox或者Chrome都沒有這樣的設計,還是比IE快,到底IE的設計者是幹啥吃的啊?)

tky

這個問題我也困擾很久,也是開啟css最佳化來避開但是總有修改css跟版型的時候還是得關閉,我查到IE(不論哪個版本) 能載入的外連CSS檔案數為32個,第33個CSS外連檔會被自動忽視沒作用,每一個外連CSS檔案的大小必須在288KB以內,模組啟動越多CSS的檔案數可能會超過32個,不知道有沒有其他辦法來改善這個問題?
讓style.css優先載入的話會不會有效呢?

可是問題是說:

  1. 不曉得怎麼樣讓style.css優先載入
  2. 一個版型可能會有多個.css檔案
  3. 你永遠不曉得地33個.css檔案是否對網站來說非常重要

所以開啟壓縮應該是目前讓網站能夠順利運作的唯一解法

tky

tky

我在網路上尋找這個問題的解決方式,有個方案是利用Javascript來合併link和style標記符號,我不太懂怎麼做,詳細資料請看這裡
我把那段程式碼獨立放在版型目錄中,然後用連結的方式加到page.tpl.php檔裡卻沒作用,你可以試試如果有用的話請教教我怎麼弄 ^^

最近我也發現這個問題,用Firefox很好,IE卻超怪,原本以為是要IE hack,後來發現是根本沒吃到css檔!!!
原來解答在這邊!太感動了!

現在Ie6使用者還是很多,我的網站用IE6看還是有許多問題讓我很頭痛。
我安裝了一個IE6 Update的模組。我還有計畫IE6使用者要一直出現Message提醒升級 :P

其他還有許多提醒升級的模組大家可參考:
http://drupal.org/project/modules?text=IE6

但因為我沒有IE6,所以一直沒看到效果。IETester沒有用的說...

消滅IE 6最近似乎已經變成一個熱門議題了。
TKY也安裝了IE6 Update;其實比較想要強迫使用者換成firefox或chrome,不過這樣太超過了一點。

TKY在IETester裡面有看到提醒的連結耶!不過因為IETester的網址都出現在網頁的最上方,所以會被擋掉一半。
總之可以正常運作就是了。

tky

tky

唯一最正確的解決方法是:啟動最佳化 CSS 檔案

編輯版型時的解決方法也很簡單,也"啟動最佳化CSS檔案",
然後在版型中自已加上要編輯的CSS檔案連結就可

<?php print $styles ?>
// 你要修改的CSS檔案

如果你啟動了,還是超過,我認為不能怪責IE6,要想想你做的網站有多糟糕,要載入這麼多不能被最佳化的CSS檔案!!
CSS載入的檔案數越多,加速的速度越慢

tky想將IE6 Update模組中的外部連結,換成一個可以同時包含「升級IE」+「介紹firefox和chrome」的網頁。
而且最好是中文的。

有沒有人知道有這樣的網站?

tky