css文件路徑正確，css代碼有效，但不起作用
[英]css file path is right, css code is valid, but it doesn't work
問題描述
我有一個奇怪的，煩人的問題。 我在根目錄下有一個css/文件夾和index.html 。 我在 header 中加載 css 個文件，如下所示：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="keywords" />
<meta name="description" content="desc" />
<!-- style files -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>
但是css不工作：我看到一個普通的index.html 。 我確定 css 路徑是正確的； 當我單擊“查看源代碼”並復制/粘貼 css 文件路徑時，它會顯示 css 文件。
此外，當我將 css 直接復制到index.html時，它可以工作。 可能是什么問題呢？
18 個解決方案
解決方案1
2 2009-11-27 17:59:13
可能不作為文本/CSS。 你檢查你的服務器配置了嗎？
解決方案2
2 2009-11-27 17:59:53
相對 URL 可能是錯誤的。 為了進一步幫助您，我們需要了解兩件事：
- 用於打開 HTML 頁面的完整（絕對）URL 是什么？ 檢查瀏覽器地址欄。
- 可以在瀏覽器中單獨打開 CSS 文件的完整（絕對）URL 是什么？
一旦你知道兩者，你就可以進行數學計算以獲得用於link標簽的正確相對路徑。
解決方案3
1 2009-11-27 17:58:08
試試 Firefox 和 Firebug。 查看錯誤控制台； 也許這只是一個小錯誤。
解決方案4
1 2009-11-27 18:00:51
它要么是 jensgram 建議的內容類型標題錯誤，要么是您提供的相對路徑 (css/...) 錯誤，因為頁面本身位於不同的文件夾中。
安裝 Firebug 並切換到“net”選項卡。 它將顯示文件是否由於 URL 錯誤而無法加載。
解決方案5
1 2015-01-28 20:32:13
嘗試使用以下格式：
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
等等。雖然它不應該，但它可能是導致它的參數的順序。 這是我使用的順序，它一直對我有用。
我還注意到你有三個
<!DOCTYPE>聲明，這是必要的嗎？它可能是造成這種情況的原因嗎？
我已經研究和
發現只允許一個...
不管它們是否是原因，我希望你能盡快找到解決方案！
解決方案6
1 2015-02-01 02:53:37
通常對於這種問題，我會這樣做：
- 在 css 文件中添加類似
body {border:10px solid red !important;}的樣式並刷新 html 文件。 - 檢查路徑和文件名中是否有任何拼寫錯誤，再次仔細檢查，如有必要，請使用復制/粘貼名稱。
- 使用版本，例如 ...
href="css/reset.css?001"... - 檢查服務器上的文件夾和文件權限。
- 嘗試在不同的瀏覽器或“私人模式”上加載它。
希望能幫助到你！
解決方案7
1 2015-02-02 12:26:23
嘗試使用 Firebug/Chrome Web Inspector 並查看文件是否加載。 可能是 Web 用戶沒有訪問 CSS 文件的權限，在這種情況下，您應該看到文件無法加載並且它們返回 401 HTTP 狀態。 在這種情況下，嘗試設置正確的權限（如果是 Unix 服務器，則通過 CHMOD，0644 就足夠了）。
解決方案8
1 2015-02-04 11:51:57
試試這個
<link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen"/>
要么
<link rel="stylesheet" type="text/css" href="~/css/reset.css" media="screen" />
解決方案9
0 2009-11-27 17:58:22
嘗試刪除媒體屬性。 我不知道這是否會影響它，但值得一試。
解決方案10
0 2015-01-28 18:10:10
如果加載了資源，請查看調試控制台。 如果沒有，並且您在每個資源中看到此錯誤：
ERR_BLOCKED_BY_CLIENT
只需禁用 AdBlock 插件。
解決方案11
0 2015-01-31 23:37:17
如果您使用整個 URL 作為路徑，它是否有效？ 如果是這樣，則您的路徑有問題。 嘗試通過添加 / href="/css/reset.css" 使其絕對化
解決方案12
0 2015-02-02 06:16:44
通過刪除媒體和類型屬性來嘗試它，可能會起作用
解決方案13
0 2015-02-02 21:46:44
嘗試直接轉到 css 文件。 如果您的網址是http://www.xxxx/com嘗試http://www.xxxx/com/css/xxxxx.css 。 檢查您是否能夠打開css。 如果沒有，你的路徑有問題
解決方案14
0 2015-02-03 14:13:53
請按照上面的屏幕截圖創建文件夾結構。
我已經更新了所有文件，它現在按預期工作。
index.html
-----------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="keywords" />
<meta name="description" content="desc" />
<!-- style files -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>
<body>
<div id="reset">
Reset Div
</div>
<div id="layout">
Layout Div
</div>
<div id="global">
global Div
</div>
</body>
</html>
----------
reset.css
----------
#reset{
color:green;
}
----------
global.css
----------
#global{
color:red;
}
-----------
layout.css
------------
#layout{
color:blue;
}
當我們運行 index.html 文件時，我們將得到以下輸出。
解決方案15
0 2015-02-04 13:25:35
檢查文件權限，您可能沒有讀取css文件的權限。 向所有人授予讀取權限。
解決方案16
0 2015-02-04 16:08:15
一些建議...
根據W3 ：
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.
所以我建議使用/css/reset.css作為路徑。
<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />
Howewer 如果這不起作用，我會嘗試添加您網站的完整地址。
http://www.yourweb.com/css/reset.css是否顯示任何內容？
如果您可以使用 PHP，我建議將此代碼添加到您的索引文件中，如下所示：
<?php echo realpath(dirname(__FILE__)); ?>
你會看到你的絕對路徑。
您是否也能夠使用 css 的 url 路徑在 jsfiddle 等外部測試站點上復制您的問題？
解決方案17
0 2015-02-04 16:19:50
此解決方案僅在您嘗試在 Web 上部署時有用，而不是在本地環境中，但由於這里缺乏細節，我想指定。
我記得有同樣的問題，我修復了它在文件路徑之前添加//因為瀏覽器需要知道它是從 web 加載的。
您可以通過在css路徑之前粘貼帶和不帶//的url輕松驗證這一點。
例如
xxx.xxx.xxx.xxx/path/to/css.css
不會被加載，而
//xxx.xxx.xxx.xxx/path/to/css.css
會被加載。
其他可能性是
- 權限不正確
- 錯誤的路徑，也許你錯過了什么？ 嘗試在開頭或絕對路徑使用斜杠。
解決方案18
0 2022-03-05 21:50:07
對於在發布到 web 的環境中遇到此行為的任何人，我建議嘗試在不同的瀏覽器或手機中查看它。 我通過我的個人電腦在谷歌瀏覽器中遇到了這種行為，並確認我的控制台阻止了 css 元素被查看。 具體來說，我在 Filezilla 中托管了我的網站。
Float權限在CSS中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.