首頁 > web前端 > css教學 > 主體

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

yulia
發布: 2018-09-20 11:25:57
原創
2684 人瀏覽過

在頁面佈局時,都主張結構與樣式分離,但是有些時候,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、編碼不對

如果不是上述問題則看一看你的CSS檔案的字元集是否和你的呼叫CSS檔案的網頁的字元集是否一致,就是charset屬性那裡。在你使用瀏覽器進行瀏覽效果的時候,ie瀏覽器中選單欄上有一個“查看--編碼”,在查看編碼上面UTF-8或GBK看看是不是同一個編碼。可能是編碼不一致所造成。

以上就是造成CSS載入失敗最常見的六大原因。我們了解這些原因後,若在實際操作上遇到類似問題,便可逐一對照排查,對症下藥解決問題。

以上是淺談CSS載入失敗的6個原因的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板