HTMLの複数のクラスChromeでは動作しますが、EdgeやFirefoxでは動作しません

Question

これは私が見たことの中で最も奇妙なことです。私はしばらく前に作ったサイトをチェックして、何かがオフになったことを確認しました。私は今、主にFirefoxを使用し、フォーマットが奇妙に見えることに気付きました。私はChromeに切り替え、すべてが素晴らしかった。私はエッジに切り替えて、すべてが間違っていた。私は3つすべての要素を検査し、クロムのみで要素に含まれる各クラス（ログインボタン、テキスト入力ボックス）のCSSを表示しました。 EdgeとFirefoxでは、最後のクラスのCSSだけが含まれているようだ。

サイトはhttps://avonctnhs.org

で誰もがここで何が起こっているか任意のアイデアを持っていますか？クラスはHTMLで設定され、実行時にクラスを追加するJavaScriptはありません。サーバー上のファイルから読み込まれたHTMLだけです。

ありがとうございました。

編集：JavaScriptを使用してクラスを追加しようとしている人や、ブラウザで機能しなかったタイプミスをしている人のために、探しているうちに検索しました。

さらに、必要なコードは素早く調べる素早い要素で表示する必要があります。

Answer 1

あなたのページはすべてのブラウザでサポートされていないHTML importsに依存しているため、CSSファイルが読み込まれません。

あなたのソースコードには、以下の行があります。

<!-- Additional Headers --> 

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

上記の行は、実際には上記の2つのファイルの内容で置き換えることができます。

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

これで問題が解決するはずです。 FirefoxがまだHTMLのインポートをサポートしていないと主張するMDNの抜粋です。

Firefoxは現在の形式でHTMLのインポートを発送しません。詳細については、このステータスアップデートを参照してください。標準や代替メカニズムのコンセンサスが出てくるまでは、Googleのwebcomponents.jsなどのポリフィルを使用することができます。