HTML中的多个类在Chrome中工作但在Edge和Firefox中没有

时间:2017-12-31 04:49:15

标签: html css google-chrome firefox microsoft-edge

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

该网站为https://avonctnhs.org

有没有人任何想法这里发生了什么?这些类是用HTML设置的,没有JavaScript在运行时添加类等;只是从服务器上的文件加载的HTML。

非常感谢你。

编辑:我花了一段时间搜索,我找到了唯一的答案,人们试图在JavaScript中添加类或者在任何浏览器中都无效的拼写错误的人。

此外,应该需要的所有代码都应该是一个很好的快速检查元素。

1 个答案:

答案 0 :(得分: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不会以当前形式发布HTML Imports。有关更多信息,请参阅此状态更新。在对标准达成共识或制定替代机制之前,您可以使用Google的webcomponents.js之类的polyfill。