動的にロードされた CSS スタイルシートが一部のブラウザーでのみ機能するのはなぜですか (およびその修正方法)。

IE で CSS スタイルシートを動的にロードする

動的 CSS ロードは、ページ読み込み遅延を最小限に抑えるレスポンシブ デザインを作成する場合に非常に役立つことがよくあります。ただし、この手法を使用すると、スタイルが選択したブラウザの一部にしか適用されないことがよくあります。

以下の例では、CSS スタイルは Firefox と Google Chrome には正常に読み込まれますが、インターネットでは読み込めません。 Explorer (IE).

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

解決策:

違いは、その方法から生じます。 IE はスタイルシート処理を処理します。他のブラウザとは異なり、IE では、組み込みのスタイル エンジンがページに読み込まれたすべてのスタイルを解析した後でのみ、スタイルシートの添付が許可されます。これを回避するには、document.createStyleSheet(url) メソッドを利用します。このメソッドは、読み込みプロセス中にスタイルシートを確実に追加します。

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

このメソッドを組み込むことで、CSS がすべてのブラウザに確実に適用されます。 Internet Explorer 独自の読み込み動作を持つものでも。

以上が動的にロードされた CSS スタイルシートが一部のブラウザーでのみ機能するのはなぜですか (およびその修正方法)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。