6

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

某使用者報案，其使用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