淺談CSS載入失敗的6個原因
- yulia原創
- 2018-09-20 11:25:572663瀏覽
在頁面佈局時，都主張結構與樣式分離，但是有些時候，css樣式不能成功加載，這是為什麼呢？這篇文章主要講了CSS載入失敗的6個原因，有需要的朋友可以參考一下，希望對你有用。
有很多剛接觸css的新手有時會遇到css載入失敗這個問題，但測試時，網頁上沒有顯示該樣式的問題，這就表示CSS載入失敗了。出現這種狀況一般是因為的css路徑書寫錯，或者是在瀏覽器中禁止掉了css的加載，可以重新啟動瀏覽器刷新，在文件中css的調用，一般都是通過link加上你的路徑來實現，具體可以看下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index</title> <link rel='stylesheet' type='text/css' href='./css/index1.css'>//注意好文件名的书写就没问题了。
造成css載入失敗的原因有很多，這可能跟你程式碼出錯，瀏覽器、路徑、編碼等等都是有關聯的。所以在具體情況具體分析。最常見的失敗原因有以下幾類：
1.網路原因
IIS空間不足、瀏覽者網路速度慢、空間速度慢等網路因素是造成CSS載入失敗的原因之一，其具體表現為：當我們打開網頁時，網頁佈局完整，但卻沒有任何佈局樣式顯示。
2.路徑錯誤或程式碼不相容
如果網頁開啟時，沒有顯示CSS設定的樣式，只以原始狀態顯示。那麼就可能是我們CSS檔案路徑出錯或是CSS程式碼不相容了。
3.if造成失敗
第三個原因是，我們編在寫CSS時，可能使用了if判斷語句對什麼瀏覽器呼叫什麼CSS文件時疏忽造成if調用的混亂，導致在某些瀏覽器上能正常顯示，在某些瀏覽器上無法正常顯示。對於這個原因，解決方法就是好好檢查造成CSS載入失敗的if判斷設定。
4.另類CSS載入失敗
何為另類CSS載入失敗？這是由於我們本身的CSS代碼寫法有問題，沒有設定好造成在各瀏覽器顯示不同佈局差距效果。在CSS裡面，我們稱為css hack。
5、瀏覽器導致
在Chrome瀏覽器的錯誤控制台下看看css檔案有沒有載入進來，確定已載入的話，檢查元素的類名與CSS中定義的類別名稱是否相同。可能侷限於ie瀏覽器，用谷歌瀏覽器就會出現錯誤。所以嘗試換個瀏覽器，然後等一下會在用，也可能修復故障。
6、編碼不對
如果不是上述問題則看一看你的CSS檔案的字元集是否和你的呼叫CSS檔案的網頁的字元集是否一致，就是charset屬性那裡。在你使用瀏覽器進行瀏覽效果的時候，ie瀏覽器中選單欄上有一個“查看--編碼”，在查看編碼上面UTF-8或GBK看看是不是同一個編碼。可能是編碼不一致所造成。
以上就是造成CSS載入失敗最常見的六大原因。我們了解這些原因後，若在實際操作上遇到類似問題，便可逐一對照排查，對症下藥解決問題。
以上是淺談CSS載入失敗的6個原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！