Mehrere Klassen in HTML Arbeiten in Chrome aber nicht in Edge und Firefox

Question

Dies ist bei weitem eines der seltsamsten Dinge, die ich gesehen habe. Ich entschloss mich, auf einer Seite zu suchen, die ich vor einiger Zeit gemacht hatte, und natürlich war etwas nicht in Ordnung. Ich benutze jetzt hauptsächlich Firefox und bemerkte, dass die Formatierung merkwürdig aussah. Ich wechselte zu Chrome und alles sah gut aus. Ich wechselte zu Edge und alles war wieder falsch. Ich inspizierte Element in allen drei und nur in Chrom zeigte es das CSS für jede enthaltene Klasse in den Elementen (Login-Schaltfläche, Texteingabefelder). In Edge und Firefox schien nur das CSS für die letzte Klasse enthalten zu sein.

Die Seite ist https://avonctnhs.org

Hat jemand eine Ahnung, , was hier vor sich geht? Die Klassen werden in HTML gesetzt, es gibt kein JavaScript, das die Klassen zur Laufzeit hinzufügt usw .; nur HTML, das von einer Datei auf einem Server geladen wurde.

Vielen Dank.

Bearbeiten: Ich verbrachte eine Weile suchen und die einzigen Antworten, die ich finden konnte, wo für Menschen, die Klassen in JavaScript hinzufügen oder Menschen mit Tippfehlern, die in keinem Browser funktioniert.

Zusätzlich sollte der gesamte Code, der benötigt werden sollte, mit einem netten schnellen Inspektionselement sichtbar sein.

Answer 1

Ihre CSS-Dateien werden nicht geladen, da Ihre Seite auf HTML imports basiert, die nicht von allen Browsern unterstützt wird.

Ihr Quellcode enthält die folgenden Zeilen, die ersetzt werden sollten.

<!-- Additional Headers --> 

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

Die obigen Zeilen können durch den folgenden Code ersetzt werden, der eigentlich den Inhalt der beiden obigen Dateien enthält.

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

Dies sollte Ihr Problem beheben. Hier ist ein Auszug aus MDN, der besagt, dass Firefox HTML-Imports noch nicht unterstützt.

Firefox liefert keine HTML-Importe in seiner aktuellen Form. Weitere Informationen finden Sie in dieser Statusaktualisierung. Bis es einen Konsens über den Standard oder alternative Mechanismen gibt, können Sie ein Polyfill wie Google webcomponents.js verwenden.