Html css 文件可能无法正常工作的完整原因列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6940904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Complete list of reasons why a css file might not be working
提问by Eric Brotto
This problem is making me feel like an absolute noob.
这个问题让我觉得自己是个绝对的菜鸟。
Here is the head of my .html file:
这是我的 .html 文件的头部：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="http://fakedomain.com/smilemachine/html.css" rel="stylesheet"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
</script>
</head>
And my html.css file is indeed where it should be. But I'm getting absolutely no styling whatsoever. Help!
我的 html.css 文件确实应该在那里。但我绝对没有任何造型。帮助！
And please don't down vote just because the answer is obvious and I can't see it.
请不要仅仅因为答案很明显而我看不到就拒绝投票。
EDIT 1
编辑 1
Okay, so now I'm just trying to fix the problem locally on my machine. Here is the head:
好的，现在我只是想在我的机器上本地解决这个问题。这是头部：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="cover.css" rel="stylesheet" type="text/css"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
</script>
</head>
and now the css:
现在的CSS：
BODY {
font-size: 18pt;
color:#000fff;
font-family: Helvetica;
margin: 0 9 9 9;
}
table {
font-size: 8pt;
color:#525252;
font-family: Helvetica;
margin: 0px;
border-collapse: separate;
}
th {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
td {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
.left {
display:inline-block;
font-size: 10pt;
color:#990055;
font-family: Helvetica;
margin: 0 0 5 0;
}
.right {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#525252;
font-family: Helvetica;
margin: 0px;
}
.question {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#B452CD;
font-family: Helvetica;
margin: 0px;
}
EDIT 2
编辑 2
Okay I've made some progress. The firebug suggestion was really good. I saw that the link to the CSS file was being read as Chinese characters. This was UTF encoding problem so I just opened my files in a text editor and then saved them as UTF-16.
好的，我已经取得了一些进展。萤火虫的建议非常好。我看到 CSS 文件的链接被读取为中文字符。这是 UTF 编码问题，所以我只是在文本编辑器中打开我的文件，然后将它们保存为 UTF-16。
But now it is reading the wrong data from the css file! I have uploaded the css file below, but in firebug it is showing a two liner.
但是现在它从 css 文件中读取了错误的数据！我已经上传了下面的 css 文件，但在 firebug 中它显示了两个班轮。
I find this baffling!
我觉得这令人困惑！
采纳答案by Nivas
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?
你确定加载了样式表？您可以使用 firefox 上 Firebug 的“网络”选项卡或浏览器控制台的“网络”选项卡查看它。
（如果 1 有效）您能否有一个简单的示例样式，看看是否已应用（并在控制台中可见）？
回答by Shef
Try:
尝试：
<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />
If that doesn't work either, then make sure the URL is accessible, and the content is what you are looking for.
如果这也不起作用，请确保 URL 可访问，并且内容是您要查找的内容。
回答by brezanac
Could it be that you have an error in your CSS file? A parenthesis left unclosed, a missing semicolon etc?
可能是您的 CSS 文件中有错误？括号未关闭，缺少分号等？
回答by Matthew Wilson
Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"'declaration in the HTML.)
如果样式表的内容类型不是“text/css”，Firefox 可以拒绝它。（这'type="text/css"'与 HTML 中的声明是分开的。）
回答by Whitney
I had the same problem - I changed my text encoding to UTF-16 on my index file and my css file would show up blank when I'd try to load the page in the browser. I figured out by much trial and error that your html and css files have to have the same encoding! I don't know if this would work for you but it did for me.
我遇到了同样的问题 - 我将索引文件上的文本编码更改为 UTF-16，当我尝试在浏览器中加载页面时，我的 css 文件将显示为空白。我通过反复试验发现您的 html 和 css 文件必须具有相同的编码！我不知道这对你有用，但对我有用。
回答by JanL
Copy the css file's url and paste it into your browser. If it doesn't load the file than you know the problem is in the url.
复制 css 文件的 url 并将其粘贴到浏览器中。如果它没有加载文件，那么您就知道问题出在 url 中。
回答by Abraar Arique Diganto
I stylesheet may not get loaded for several reasons. But the main approach to solve such a problem is as follows:
由于多种原因，我的样式表可能无法加载。但解决此类问题的主要方法如下：
1.After loading the page, press F12to open the Developers Console. Check the console for any logged errors.
1.加载页面后，按F12打开开发者控制台。检查控制台是否有任何记录的错误。
2.Then you should check the Stylesheet tab and see the list of stylesheets the browser loaded.
2.然后您应该检查样式表选项卡并查看浏览器加载的样式表列表。
3.The URL you're using inside your HTML linktag may be unaccessable, so manually try to visit the stylesheet with a browser and see if everything renders correctly.
3.您在 HTMLlink标记中使用的 URL可能无法访问，因此请手动尝试使用浏览器访问样式表，看看是否一切都正确呈现。
4.Any typo inside your HTML or CSS stylesheet may cause the stylesheet from loading.
4.HTML 或 CSS 样式表中的任何拼写错误都可能导致加载样式表。
5.Check for any occurrences of fatal errors before your <link>tag. A fatal error may stop the running code and suspend the page, thus not including your stylesheet.
5.在<link>标记之前检查是否出现任何致命错误。致命错误可能会停止正在运行的代码并挂起页面，从而不包括您的样式表。
Hope that helps.
希望有帮助。
回答by Dwain Beckford
I had a problem like this! I was able to fix it following
我有这样的问题！我能够修复它以下
Step 1>>from Abraar Arique post, I went into the console>> Went under Style Editor and found Firefox wasn't loading the updated copy of my css file.
第 1 步>>从 Abraar Arique 帖子中，我进入控制台>>进入样式编辑器，发现 Firefox 没有加载我的 css 文件的更新副本。
I cleared all history and reload the page then my problem was fixed.
我清除了所有历史记录并重新加载页面，然后我的问题就解决了。
回答by Y. Arifin
I was facing the same problem, but the reason was the styling in the css is wrapped in an ID that is not exist
我遇到了同样的问题，但原因是 css 中的样式被包裹在一个不存在的 ID 中
#navi ul{
color: red;
}
the #naviselector is nowhere in the HTML because i forgot to add it before writing the CSS.
in my case I worked with Less file so I nested it like this
该#navi选择是无处在HTML，因为我忘了写CSS前添加它。就我而言，我使用的是 Less 文件，所以我像这样嵌套了它
#navi{
ul{
color:red;
}
}
I hope this help to re-check when things doesn't work
我希望这有助于在事情不起作用时重新检查
回答by hugsbrugs
New one for you Guys !
新的给你们！
During my Gulp minification process
在我的 Gulp 缩小过程中
<!-- build:css /css/project-mini.css -->
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/splash.css"/>
<link rel="stylesheet" href="css/header.css"/>
<link rel="stylesheet" href="css/print.css" media="print"/>
<!-- endbuild -->
Last CSS file was for print and the generated output gave me
最后一个 CSS 文件用于打印，生成的输出给了我
<link rel="stylesheet" href="css/project-mini.css" media="print"/>
So because of media="print" all CSS rules were skipped !
所以因为 media="print" 所有的 CSS 规则都被跳过了！
