雖然覺得世上不太可能再出現第二枚相同茶包,但因為十分懸疑離奇,偵辦手法也很典型,還是筆記分享一下。

某使用者報案,其使用IE瀏覽ASP.NET電子表單程式時,出現檢視原始碼有內容,但網頁一片空白,看不到任何HTML元素,亦無法操作。

經初步檢測:

1) 只有該使用者遭遇此狀況,同時間其餘人員使用完全正常。
2) 使用IE瀏覽電子表單系統才會出問題,瀏覽入口網站或外部網站則無異狀。
3) 在該台主機改用非IE瀏覽器檢視問題空白網頁,並未發生網頁空白狀況。
4) 廣泛測試了我們所開發的其他網站專案,倒是發現有幾個網站應用程式也同時出現網頁空白現象。

初步歸納現象為"某台機器的IE在檢視某些ASP.NET網站專案時會出現HTML原始檔正常,但網頁呈現完全空白無可見元素的狀況"。懷疑是IE7版本問題,請使用者升級為IE8但問題依舊,而IE8多了IE Dev Tools可用以檢查HTML、CSS、Script,卻發現HTML及CSS頁籤雖有內容,但字型小到只有1-2個Pixel,無法閱讀,Script頁籤則正常,感覺上這是台被詛咒的電腦,邪門到想請使用者重灌作業系統...

不過,依茶包射手法則,"問題可以反覆重現",加上"部分正常,部分異常可供參照比對",理論上一定能透過交叉比對找出問題根源,這種史萊姆等級小茶包還搞不定弄到要重灌,肯定無顏見江東父老,於是"對照法"上場!

首先,找到發生空白的ASP.NET網頁,將原始檔另存成HTML放在同網站,以IE檢視可看到內容,但因放HTML的路徑與原ASPX不同,某些相對路徑JavaScript未順利載入運作不正常。為消除變因,將HTML也移到問題ASPX同資料夾下,發現此時HTML也變成空白!!

由此一現象可推測"原本JS/CSS相對路徑不對時可顯示,移動到正確路徑下反而變空白,表示載入的JS/CSS涉有重嫌!",接著輪到"消去法"上場。

編輯HTML,將JS/CSS逐一移除,直到網頁空白狀況消失為止,藉此鎖定了某個Style.css,經反覆驗證"加上就空白、移除就正常",凶手終於現身囉! 另外回想,該Style.css被應用在好幾個網站專案中,剛好就是先前檢測發現"有幾個網站應用程式也出現網頁空白現象"的那些網站專案,更佐證了問題出在該CSS檔。

再來,對Style.css進行消去法,逐一刪除CSS規則,直到某規則一刪除就恢復正常為止,如此找出了導致空白的Style設定: body { font-family: Courier New }

另外做了一個簡單HTML也能觸發網頁空白問題:
<html><head><style>body { font-family: Courier New }</style></head><body>Test</body></html>

至此,我們已經確認在網頁中引用Courier New是造成網頁空白的元凶!! 是沒安裝Courier New字型嗎? 不對,在Windows中,若找不到該字型,會使用預設字型,不致整個網頁崩壞。而使用Word查看,確實Courier New字型也在清單中。順手想在Word驗證Courier New字型是否正常,一則錯誤訊息帶來破案線索:

只要選擇Courier New字型輸入文字,Word會出現"記憶體或磁碟空間不足,Word無法顯示要求字型。"的錯誤訊息,推估該主機的Courier New字型可能已毁損或故障,這解釋了IE遇到網頁指定該字型時,顯示網頁過程發生錯誤才衍生特定網頁空白的現象。但有趣的是,IE並沒有觸發任何例外或傳回錯誤訊息,只是丟回完全空白的網頁,害我們花了不少時間才找出問題根源。

所有的玄疑之處都有了合理解釋,該主機也在由其他機器複製了Courier New字型後恢復正常,為本案劃下完美的句點。


Comments

# by veronica

學起來了!原來字型不見也會導致網頁變空白呀! 感謝黑大的耐心射茶包~

# by Alex Lee

"但因放HTML的路徑與原ASP.NET不相" <---- 有掉字喔

# by KKBruce

破案的快樂在過程 ^_^

# by 小黑

茶包總是「黑」的好

# by 星寂

沒想到還會因為字型網頁出不來...@@

# by william0657

想都沒想過的問題,筆記起來!!

Post a comment