為什麼我的動態載入 CSS 樣式表僅在某些瀏覽器中運作（以及如何修復它）？-css教學-PHP中文網

為什麼我的動態載入 CSS 樣式表僅在某些瀏覽器中運作（以及如何修復它）？

Linda Hamilton

發布： 2024-11-25 14:30:14

原創

708 人瀏覽過

Why Do My Dynamically Loaded CSS Stylesheets Only Work in Some Browsers (and How Can I Fix It)?

在 IE 中動態載入 CSS 樣式表

動態 CSS 載入對於建立可最小化頁面載入延遲的響應式設計通常具有無價的價值。然而，在使用這種技術時，使用者經常發現他們的樣式僅適用於他們選擇的某些瀏覽器。

在下面的範例中，CSS 樣式在 Firefox 和 Google Chrome 中成功加載，但在 Internet 中加載失敗資源管理器（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中文網其他相關文章！