css 調試排查列表

在開發網頁展現層的css時，有時會發現樣式沒有被應用的情況，這是需要藉助Firefox下的Firebug外掛程式來協助問題解決。

通常有三種情況會表現出定義的樣式沒有被應用。

1. 樣式檔案沒有被載入成功（低級錯誤，但在複雜的環境下，時有發生）

2. css檔案並沒有被引用（低級錯誤，但在負責的情況下，是有發送）

3. 樣式衝突（進階錯誤，需要賴心排查）

對於樣式檔案沒有被載入成功導致的錯誤，可以通過firebug的網路（Network)查看。在Firebug的協助下，你可以很容易發現哪些檔案沒有載入成功，這其中就可能包含了css檔案。那些檔案會被標記為紅色。

 

如果第一種情況不存在，那麼排查css檔案是否被引用。通過Firebug的css列表來進行判斷。

.

如果第二種情況不存在，那麼排查是否存在樣式的衝突。如果你引入了複雜的css架構作為普片樣式，但你自己又定義了一套css用於項目的特殊展現。當兩套css同時被包含在網頁中時，衝突的風險就可能出現。這是，你可以在firebug下，選中網頁元素，查看“計算出的樣式”，例如點開font-family，Firebug會為你展現這個樣式是定義在哪個css檔案中的。

 

這三點基本夠用，祝你好運。少加班，多一點時間來陪家人。