HTML中的多个类在Chrome中工作，但不在Edge和Firefox中(Multiple Classes in HTML Work in Chrome but not in Edge and Fir

HTML中的多个类在Chrome中工作，但不在Edge和Firefox中(Multiple Classes in HTML Work in Chrome but not in Edge and Firefox)

这是我见过的最奇怪的事情之一。 我决定重新检查一下我刚才做的一个网站，当然有些东西是关闭的。 我现在主要使用Firefox，并注意到格式看起来很奇怪。 我切换到Chrome，一切都很棒。 我切换到边缘，一切都错了。 我检查了全部三个元素，并且只在Chrome中显示了元素（登录按钮，文本输入框）中每个包含类的CSS。 在Edge和Firefox中，只有最后一类的CSS才被包含在内。

该网站是https://avonctnhs.org

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

非常感谢你。

编辑：我花了一段时间搜索和唯一的答案，我可以找到人们试图添加JavaScript的类或错别字，在任何浏览器中都不起作用的人。

此外，应该需要的所有代码应该可见，并且有一个很好的快速检查元素。

This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.

The site is https://avonctnhs.org

Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.

Thank you so very much.

Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.

Additionally, all the code that should be needed should be visible with a nice quick inspect element.

最满意答案

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

您的源代码包含以下应该替换的行。

<!-- 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不会以目前的形式发布HTML Imports。 查看此状态更新以获取更多信息。 在标准或替代机制达成共识之前，您可以使用Google的webcomponents.js等polyfill。

Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.

Your source code has the following lines which should be replaced.

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

The above lines can be replaced with the below code which is actually the contents of the above two files.

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

This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.

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.