css 文件可能无法正常工作的完整原因列表答案

【问题标题】：Complete list of reasons why a css file might not be workingcss 文件可能无法正常工作的完整原因列表
【发布时间】：2021-12-22 08:55:55
【问题描述】：

这是我的 .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>

我的 html.css 文件确实在它应该在的地方。但我绝对没有任何样式。

好的，所以现在我只是尝试在我的机器上本地解决问题。这是头：

<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>

现在是 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;
}

好的，我已经取得了一些进展。萤火虫的建议非常好。我看到 CSS 文件的链接被读取为中文字符。这是 UTF 编码问题，所以我只是在文本编辑器中打开我的文件，然后将它们保存为 UTF-16。

但现在它从 css 文件中读取了错误的数据！我已经上传了下面的 css 文件，但在 firebug 中它显示了一个两个衬里。

【问题讨论】：

这可能没有帮助。但是，您有什么理由为您的 css 文件使用完整的 URL 吗？为什么不直接使用 /smilemachine/html.css？
我只是认为绝对网址会更确定。就像它可以保证工作一样。
恰恰相反 ;-) 相对 URL 将在更多情况下起作用。
你的css中的错字也会这样做;)

标签： html css

【解决方案1】：

您确定样式表已加载吗？您可以在 firefox 上使用 Firebug 的“Net”选项卡或在浏览器控制台的“Network”选项卡上查看它。
（如果 1 有效）您能否提供一个简单的示例样式并查看它是否被应用（并且在控制台中可见）？

【讨论】：

出于同样的原因接受（Firebug 建议：）
我的 CSS 不起作用，因为从 Web 获取代码时粘贴了一个奇怪的不可见字符。我通过检查以下站点中的 CSS 找到了它：jigsaw.w3.org/css-validator 我只是在新文件中手动重写了代码，一切正常。
非常感谢@Alexis。它显示了错误：I/O Error: Unknown mime type : text/plain;charset=UTF-8。似乎 PHP 函数 (mime_content_type) 和 'file -bi' Unix 命令都返回了上述内容。此外，text/x-c++ 用于 .js 文件。暂时硬编码，并将尝试进一步调查。

【解决方案2】：

试试：

<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />

如果这也不起作用，请确保 URL 可访问，并且内容就是您要查找的内容。

【讨论】：

我的猜测是样本中缺少 type="text/css"。
@Eric Brotto：您确定 css 文件的内容已正确加载，并且没有因为某些重写规则而搞砸。你可以使用 Firebug 来检查加载的 CSS 文件的内容吗？我们可以看到一个活生生的例子，这样我们就可以亲自调试这个问题吗？
感谢谢夫的努力。请参阅我的编辑 2。
@Eric Brotto：无需将文件另存为UTF-16，UTF-8 很好，推荐。我在提供的链接中看不到问题出在哪里。在您的问题中，您询问的是外部 css 文件，但是在提供的链接中，您使用了内联 css。那么，现在的问题是什么？
实际上，忽略关于 javascript 的那一点。我真的认为一切都与 UTF 编码有关。

【解决方案3】：

如果样式表的内容类型不是“text/css”，Firefox 可以拒绝该样式表。（这与 HTML 中的 'type="text/css"' 声明是分开的。）

【讨论】：

谢谢！我的系统正在以 .scss 文件扩展名发送文件中的 css 内容。在我的反向代理中将这些文件的 Content-Type 设置为 text/css 就可以了。

【解决方案4】：

可能是您的 CSS 文件中有错误吗？括号未闭合，缺少分号等？

【讨论】：

这是我的问题。修复 css 文件会有所不同。

【解决方案5】：

我遇到了同样的问题 - 我将索引文件上的文本编码更改为 UTF-16，当我尝试在浏览器中加载页面时，我的 css 文件会显示为空白。经过反复试验，我发现您的 html 和 css 文件必须具有相同的编码！我不知道这是否对你有用，但对我有用。

【讨论】：

谢谢，您的回答有帮助。我遇到了同样的问题：html 文件以某种方式编码为 UTF-16，而 CSS/JS 文件编码为 UTF-8...
使用 Visual Studio 编辑和保存 CSS 文件后，我遇到了类似的问题。当在 Visual Studio 中也编辑 HTML 时，问题得到了解决。感谢您对编码的提示。

【解决方案6】：

由于多种原因，我的样式表可能无法加载。但解决此类问题的主要方法如下：

1. 加载页面后，按F12 打开开发者控制台。检查控制台是否有任何记录的错误。

2. 然后您应该检查样式表选项卡并查看浏览器加载的样式表列表。

3. 您在 HTML link 标记中使用的 URL 可能无法访问，因此请手动尝试使用浏览器访问样式表，看看是否一切正常。

4. HTML 或 CSS 样式表中的任何拼写错误都可能导致样式表无法加载。

5. 检查<link> 标记之前是否出现任何致命错误。致命错误可能会停止运行代码并暂停页面，因此不包括您的样式表。

希望对您有所帮助。

【讨论】：

【解决方案7】：

复制 css 文件的 url 并将其粘贴到浏览器中。如果它没有加载文件，那么您就知道问题出在 url 中。

【讨论】：

【解决方案8】：

就我而言，问题出在媒体选项上：

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

我通过删除它解决了：

<link rel="stylesheet" type="text/css" href="css/style.css"/>

【讨论】：

【解决方案9】：

我遇到了这样的问题！我能够在下面修复它

第 1 步>>来自 Abraar Arique 帖子，我进入控制台>>进入样式编辑器，发现 Firefox 没有加载我的 css 文件的更新副本。

我清除了所有历史记录并重新加载页面，然后我的问题得到了解决。

【讨论】：

【解决方案10】：

我认为问题不在于您发布的示例 - 我们需要查看 CSS，或验证其位置等！

但是为什么不尝试将其剥离为一个 CSS 规则 - 将它放在 HEAD 部分，然后如果它有效，则将该规则移至外部文件。然后重新引入其他规则以确保没有任何遗漏或优先于您的 CSS。

【讨论】：

【解决方案11】：

我遇到了同样的问题，上传到网络服务器时Firefox中出现中文字符，但在本地主机上没有。我将 css 文件的内容复制到一个新的文本文件中。现在都在工作。一定是某种 unicode/编码错误。

【讨论】：

【解决方案12】：

我遇到了同样的问题，但原因是 css 中的样式被包裹在一个不存在的 ID 中

#navi ul{
    color: red;
}

#navi 选择器不在 HTML 中，因为我在编写 CSS 之前忘记添加它。就我而言，我使用的是 Less 文件，所以我像这样嵌套它

#navi{
    ul{
       color:red;
   }
}

我希望这有助于在出现问题时重新检查

【讨论】：

【解决方案13】：

给你们一个新的！

在我的 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 -->

最后一个 CSS 文件用于打印，生成的输出给了我

    <link rel="stylesheet" href="css/project-mini.css" media="print"/>

所以因为 media="print" 所有的 CSS 规则都被跳过了！

【讨论】：

【解决方案14】：

如果您的 URL 正常工作并正确加载文件，并且您说添加正确

<link rel="stylesheet" type="text/css" href="yourlink.css">

代码没有修复它，那么唯一的另一个问题是它是实际 .css 文件中的错误。为了就此向您提供建议，我们需要查看该文件。

您可以做的是将一个基本的<div> 标签写入您的 HTML，将一个基本的 CSS 规则添加到您现有的文件中，然后看看您是否可以使用新的 CSS 规则来影响这个标签。

【讨论】：

【解决方案15】：

我认为你错过了type="text/css"。

【讨论】：

【解决方案16】：

我还有一个。我将我的 css 文件命名为：default.css。它不会加载。当我试图在浏览器中查看它时，它显示了一个空白页面。

我将名称更改为 default_css.css，它开始工作了。

【讨论】：

【解决方案17】：

我遇到了同样的问题，我对两个文件都使用了 UTF-8 编码，如下所示：

在CSS 文件 中添加@charset "UTF-8"; 和在HTML 文件 中<head> 标记下的<meta charset="UTF-8">。它对我有用。

它对两个文件（即 HTML 和 CSS）进行相同的编码。

您也可以对“UTF-16”编码执行相同的操作。
如果仍然无法正常工作，请检查 HTML 文件中 <head> 标记下的 <link type="text/css" rel="stylesheet" href="style.css"/>，您应该在其中提及 type="text/css"

【讨论】：

【解决方案18】：

我正在使用 Wordpress，样式表被设置为排入页脚

wp_enqueue_style(
        'editor-css',
        $stylesheet_directory_uri . '/assets/css/editor.css',
        ['wp-edit-blocks'],
        null,
        true   // $in_footer
    );
}

这导致media="1" 属性被添加到<link> 标记中，并导致样式表被加载但未应用。

将参数更改为 false 并且它现在可以工作了

【讨论】：

【解决方案19】：

不知道有没有人先加载RESET.CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

【讨论】：

【解决方案20】：

我的 html 文件中有错误。似乎代码编辑器不会捕获 html 标签错误。在编辑 html 文件时，我的编辑器为我错过的输入添加了一个结束标记。删除它解决了我的问题，现在 CSS 文件正在加载。

【讨论】：

【解决方案21】：

我遇到了 css 无法加载和硬重新加载对我有用的问题。在 chrome 中硬重新加载 => CTRL + SHIFT + R

【讨论】：

【解决方案22】：

可能是后端设置的Multipurpose Internet Mail Extensions (MIME) (more) 类型无效。

某些解决方案，例如 PHP 函数 mime-content-type (more) 或 Unix 命令 file -ib (more) 有时可能会返回非常意外的结果，例如 text/plain 用于 *.css 和 text/x-c++ - *.js。

调试器（即 DevTools）或在线验证器（即 @Alexis 提到的）可能会有所帮助。

比如上面的validator显示：

I/O Error: Unknown mime type : text/plain;charset=UTF-8

对于从网络服务器/后端下载的*.css 文件。网络服务器在标头中传递了这个 MIME 类型，并且由于所需的类型应该是 text/css，因此即使在 HTML 中设置了 type="text/css" 属性，浏览器也会忽略样式表。

【讨论】：

【解决方案23】：

<link> 标签中的 URL http://fakedomain.com/smilemachine/html.css 错误。文件未找到。

【讨论】：

因为它不是我的真实域名！
是的，我知道这是假的，但是您的文件丢失了，这就是问题
不，不是。他在他的实际代码中使用了真实的 URL，呵呵！

【解决方案24】：

这个错误很有趣

从外观上看，我认为错误是在脚本函数中，兄弟。

document.getElementByIt('name')

节点必须在引号内。

如果您的样式表已链接，这将与脚本一起使用。

此外，对于样式，您可以尝试内联 CSS 或在 .HTML 文件中创建标签并将所有样式放在那里。

【讨论】：

创建标签。这样，您就可以摆脱将 .css 文件链接到 HTML 文档头部的额外工作。但是，单独的 css 文件只会使代码看起来干净且易于管理。