淺談CSS載入失敗的6個原因-css教學-PHP中文網

首頁

web前端

css教學

淺談CSS載入失敗的6個原因

yulia

Sep 20, 2018 am 11:25 AM

css

在頁面佈局時，都主張結構與樣式分離，但是有些時候，css樣式不能成功加載，這是為什麼呢？這篇文章主要講了CSS載入失敗的6個原因，有需要的朋友可以參考一下，希望對你有用。

有很多剛接觸css的新手有時會遇到css載入失敗這個問題，但測試時，網頁上沒有顯示該樣式的問題，這就表示CSS載入失敗了。出現這種狀況一般是因為的css路徑書寫錯，或者是在瀏覽器中禁止掉了css的加載，可以重新啟動瀏覽器刷新，在文件中css的調用，一般都是通過link加上你的路徑來實現，具體可以看下程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;./css/index1.css&#39;>//注意好文件名的书写就没问题了。

造成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、編碼不對