Warum funktionieren meine dynamisch geladenen CSS-Stylesheets nur in einigen Browsern (und wie kann ich das beheben)?

CSS-Stylesheets dynamisch im IE laden

Das dynamische Laden von CSS erweist sich oft als unschätzbar wertvoll für die Erstellung responsiver Designs, die die Latenz beim Laden der Seite minimieren. Bei Verwendung dieser Technik stellen Benutzer jedoch häufig fest, dass ihre Stile nur für einige der von ihnen gewählten Browser gelten.

Im folgenden Beispiel werden die CSS-Stile erfolgreich in Firefox und Google Chrome geladen, können jedoch im Internet nicht geladen werden Explorer (IE).

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Lösung:

Der Unterschied ergibt sich aus der Art und Weise, wie der IE die Stylesheet-Verarbeitung handhabt. Im Gegensatz zu anderen Browsern erlaubt der IE das Anhängen von Stylesheets erst, wenn die integrierte Style-Engine alle mit der Seite geladenen Styles analysiert hat. Um dies zu umgehen, nutzen wir die Methode document.createStyleSheet(url), die das Stylesheet während des Ladevorgangs zuverlässig hinzufügt.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Durch die Einbindung dieser Methode stellen wir sicher, dass das CSS in allen Browsern angewendet wird, sogar diejenigen mit dem einzigartigen Ladeverhalten des Internet Explorers.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine dynamisch geladenen CSS-Stylesheets nur in einigen Browsern (und wie kann ich das beheben)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!