这是迄今为止我见过的最奇怪的事情之一。我决定回到我刚做的网站上,当然有些东西已经关闭了。我现在主要使用Firefox并注意到格式看起来很奇怪。我切换到Chrome,一切看起来都很棒。我切换到Edge,一切都错了。我在所有三个中检查了元素,只有在chrome中它才显示元素中每个包含的类的CSS(登录按钮,文本输入框)。在Edge和Firefox中,似乎只包含了最后一个类的CSS。
有谁知道这里发生了什么?这些类是用HTML设置的,没有JavaScript在运行时添加类等;只是从服务器上的文件加载的HTML。
非常感谢你。
编辑:我花了一段时间搜索和我能找到的唯一答案,人们试图在JavaScript中添加类或者在任何浏览器中都无效的拼写错误的人。
此外,应该需要的所有代码都应该是可见的快速检查元素。
您的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。