都是CSS惹的禍

      今天遇到一個很搞笑的問題，在將美工設計的靜態頁面轉換為aspx頁面時，設計頁面正常顯示，但預覽時格式出現了問題。儘管這是一個很簡單的問題，但如果沒有遇到過，怕是一下子很難判定是哪裡出了問題。

　　設計檢視：

  　 預覽：

      根據美工設計的靜態頁面，顯示沒有問題。但是如果用aspx頁面代替靜態頁面，沒有任何的修改，CSS引用、圖片連結完全正確，在設計頁面查看一切正常，但是當你預覽的時候，樣式載入不進來，有的樣式應用上了，但是有的沒有，也就是說一部分CSS樣式並沒有發揮作用。這是什麼問題呢？很怪。之前也做過同樣的頁面轉換，但是並沒有出現這種情況，很是不解。繼續檢查CSS和圖片的連結，並沒有發現問題，無助之餘只能尋求於網路，但是google並沒有到類似的問題。看來真的很少有人遇到此類問題。我只能自己一點點去摸索，如果把CSS直接寫到頁面，則沒有問題。

總結問題：
　　<1>設計頁面沒有問題，預覽時才出現這種情況
　　<2>之前類似的操作，並沒有出現這種情況。
　　<3>其他人很少遇到這種情況

分析：

　　應該比較此項目和之前的項目，設定、技術層面有哪些不同；會不會是應用程式在啟動並執行時候，載入了一些未知的元素為了減少項目之間的聯絡、耦合，我重新建立了一個WEB項目進行單獨的測試，結果還是出現這種情況。開始我覺得是不是CSS之間產生的衝突，於是，我將某一個模組單獨拿出來做成一個頁面，引用相應的CSS，但是依然錯誤。是不是VS2005的問題，我又用2008進行了測試，也是重新建立一個新的WEB。經過一番檢查之後，縮小了問題的出處的範圍：
　　<1>不是.Net開發工具的問題。不過有可能是其它的外掛程式引起的問題。之前安裝PowerDesigner，就出現了一些奇怪的問題。
　　<2>CSS自身的問題，儘管不知道問題出在哪裡。
我又重新檢查了電腦的程式，並沒有發現類似於PowerDesigner設計類軟體。之前是將某一個模組的樣式表拿出來進行測試，並沒有發現此類問題。

排除其它可能，問題重新回到CSS

　　這下，可以肯定問題依然出在CSS檔案自身的問題上。如果是有經驗的高手，也許不用上述的複雜檢驗，就能很直接的斷定是CSS的問題。但是之前我也對CSS進行了檢查、測試，並沒有發現問題的根源。這下，需要更加得深入。

　　我從項目中，拿出一個頁面，然後拿出頁面的一部分，然後拿出針對某一控制項的CSS控制項，經過一番測試，終於得出了一個驚人的發現，當CSS不包含注釋的時候，頁面正常顯示，原來問題就出在注釋上，然後我就google下，CSS注釋會引發的異常，果然找到了一些眉目。

　　注釋不能為中文，如果你為自己定義的 CSS 寫了中文注釋，那麼在一些特殊情況下（例如伺服器端的支援，頁面所用的程式類型等）會導致部分代碼無故失效。

　　注釋符號與漢字間應該有空格，如果是下面的寫法會異常。

/*頭部分*/
.header
{
   width:100%;
   heigth:172px;
   border-width:1px;
}

 

按照他的說法，我真的試了一下，果然，還真是奏效。但是查看之前的項目，CSS中也有中文注釋，而且中文注釋與注釋符號間也沒有空格，為什麼能夠正常顯示。

　　認真想想，不能有漢字注釋，應該有空格，問題應該沒這麼簡單，這還不是問題的真正的根源。 很有可能是編碼的問題，於是我用記事本開啟最初的CSS檔案，另存新檔UTF-8格式，然後覆蓋了項目中的CSS檔案，結果真的正常顯示了。問題的真正根源找到了。

最終結論：

　　CSS 檔案預設是 ANSI 編碼，可能你會發現在一般情況下這樣也是沒有問題的，然而當 CSS 檔案中包含有中文注釋時就可能不盡如人意了！

　　保證應用程式中，HTML、JS、CSS等使用統一的編碼。最好使用UTF-8，有的時候中文頁面可能需要設定為GB2312。

　　當你在遇到JS、CSS等引入出現異常時，不妨看下檔案的編碼。

 

　　本文只是一個小小的問題，如果是有經驗的高手，可能一下就能看出問題的癥結。但有的時候，總容易迷糊，在這裡我將它寫出來，或許給大家提供的協助很小，但是說明了我們編程過程中的一些應該注意的小問題，也為朋友們敲響警鐘，千萬別再學我這麼傻了。