html - HTML 中的多个类在 Chrome 中有效，但在 Edge 和 Firefox 中无效

Question

这是迄今为止我见过的最奇怪的事情之一。我决定回头看看我刚才做的一个网站，当然有些东西不对劲。我现在主要使用 Firefox 并注意到格式看起来很奇怪。我切换到 Chrome，一切看起来都很棒。我切换到 Edge，一切又都错了。我检查了所有三个元素，只有在 chrome 中，它显示了元素中每个包含类的 CSS(登录按钮、文本输入框)。在 Edge 和 Firefox 中，似乎只包含最后一类的 CSS。

站点是https://avonctnhs.org

有没有人知道这里发生了什么？这些类在 HTML 中设置，没有 JavaScript 在运行时添加类等；只是从服务器上的文件加载的 HTML。

非常感谢。

编辑:我花了一些时间进行搜索，我能找到的唯一答案是，对于那些试图在 JavaScript 中添加类的人，或者对于拼写错误但在任何浏览器中都不起作用的人。

此外，所有需要的代码都应该通过一个漂亮的快速检查元素可见。

Answer 1

您的 CSS 文件无法加载，因为您的页面依赖于 HTML imports并非所有浏览器都支持。

您的源代码中有以下几行应该被替换。

<!-- Additional Headers -->

<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">

上面几行可以换成下面的代码，其实就是上面两个文件的内容。

<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

这应该可以解决您的问题。这是 MDN 的摘录，其中指出 Firefox 尚不支持 HTML 导入。

Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.