为什么我的动态加载 CSS 样式表仅在某些浏览器中工作（以及如何修复它）？-css教程-PHP中文网

为什么我的动态加载 CSS 样式表仅在某些浏览器中工作（以及如何修复它）？

Linda Hamilton

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

原创

707 人浏览过

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中文网其他相关文章！