为什么 Firefox 不使用本地绝对路径中的 CSS？答案

【问题标题】：Why does Firefox not use CSS from an local absolute path?为什么 Firefox 不使用本地绝对路径中的 CSS？
【发布时间】：2018-12-10 15:11:00
【问题描述】：

我有一个本地 HTML 文件，其中包含指向本地 CSS 文件的链接。这两个文件都在机器 A 上。HTML 位于一个位置，但 CSS 存储在机器 A 的其他位置。HTML 文件是由机器 A 上运行的程序生成的报告。用户在机器 A 上阅读 HTML 报告。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My very first html document</title>
    <link rel="stylesheet" type="text/css" href="C:\tmp\folder1\css\mystyle.css"  />
</head>
<body>
    <div class="myclass" >Hello World!</div>
</body>
</html>

CSS mystyle.css

.myclass {
    background-color: yellow;
}

文件夹结构如下：

C:
+
+->tmp
     +
     +>folder1
     |       +
     |       +>css
     |           +
     |           +>mystyle.css
     +>folder2
             +
             +>index.html

在 Firefox 中不应用 CSS。来自 Firefox、Chrome、IE、Edge（顺时针）的结果。

Firefox 版本：63.0.3（64 位）

我的尝试

CSS 的相对路径 (href="../folder1/css/mystyle.css" )。这行得通。
从正斜杠更改为反斜杠，转义斜杠。这不起作用。

我更喜欢 CSS 的绝对路径。我宁愿不复制 CSS。

问题

谁能解释一下为什么 Firefox 不应用 CSS？
有什么方法可以快速解决这个问题？
正确的做法是什么？

【问题讨论】：

可能与安全有关。快速修复可能是您自己提供的相对路径或设置（本地主机）网络服务器来运行您的站点。

标签： html css firefox

【解决方案1】：

出于明显的安全原因，Firefox 无法访问您的文件系统（请参阅this kb post for more infos）。
如果您想将 css 文件保存在不同的位置，有许多可能的解决方法，最流行的一种是 webpack 或任何其他构建系统。基本上每个现代前端开发堆栈都使用它。它是一个 node.js 工具，可以使用预配置的路径收集您的所有静态资产，并将它们“捆绑”在本地构建中。
如果它只是单个用例的单个 css 文件，只需使用相对路径（或 file:/// 前缀路径）。这里最好的解决方案显然是最快和最简单的。

【讨论】：

【解决方案2】：

将 file:// 添加到您的 css 链接的 href 中，它将起作用。我只是使用您的文件夹结构自己尝试过。据报道，它最初在 Firefox 中不起作用，但在 Chrome 中确实起作用。前置 file:// 允许它同时在两者上工作。

<link rel="stylesheet" type="text/css" href="file://C:/tmp/folder1/css/mystyle.css"  />

【讨论】：