CSS预加载仅在Google Chrome上无法正常工作

Question

我正在尝试预加载CSS，它在Chrome上工作正常，但在Firefox（非Edge）上却无法正常工作，我在任何地方都找不到解决方案。

我在Google Chrome 74.0.3729.131和Firefox 66.0.5（以及Edge 41.16299.1004.0）上进行了测试。

在任何地方都可以正常工作。

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

但这只能在Chrome上使用。

<link rel="preload" href="/style.css" as="style" media="all" type="text/css" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/style.css" media="all" type="text/css" /></noscript>

我看到CSS已充电但未加载，因此javascript函数无法正常工作（我想找到真正的原因和解决方案，而不是使用onerror javascript事件绕过问题）。

Answer 1

去年Chrome Firefox出现问题，网络浏览器对文档中的脚本有不同的软件解释 我不得不重写脚本 将您的网站通过w3c val可以找到答案 https://validator.w3.org

JohnC

Answer 2

经过

测试，似乎可以在Firefox和Chrome中正常运行 在脚本

中的4个位置删除

Answer 3

对于此solution，您需要使用两行声明样式，第二行是Firefox的后备（第二行）：

<link rel="preload" href="/style.css" as="style" />
<link rel="stylesheet" href="/style.css" />

据证明，Firefox不支持preload。