动态加载 css 样式表在 IE 上不起作用

Posted 2023-03-05

【中文标题】动态加载 css 样式表在 IE 上不起作用

【英文标题】：Dynamically loading css stylesheet doesn't work on IE

【发布时间】：2010-11-14 04:07:33

【问题描述】：

我像这样动态加载一个 css 样式表（在 jQuery 的帮助下）：

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

这在 Firefox 和 Google Chrome 中运行良好，但在 IE 中不。

有什么帮助吗？ 谢谢

【问题讨论】：

***.com/questions/524696/… 的副本

【参考方案1】：

您需要最后设置 href attr 并且仅在将链接 elem 附加到头部之后：

$('<link>')
  .appendTo('head')
  .attr(type : 'text/css', rel : 'stylesheet')
  .attr('href', '/css/your_css_file.css');

更新

现在 IE 和 Edge 的唯一目的是下载 Chrome，所以我建议不要使用对 IE 或 Edge 的自定义支持来膨胀你的代码，而只是忽略它们的存在。

【讨论】：

这是一个需要注意的重要 Internet Explorer 怪癖（即使在最近的 IE 8 中也是如此），并且对我正在从事的项目绝对至关重要。感谢您在这里注意到它。人们什么时候会停止使用 IE？

我更喜欢这个，而不是 IE-only 'document.createStyleSheet' 方法。

这在 IE8 兼容模式下的 IE9 上对我有用，但在纯/真正的 IE8 上失败了。在真正的 IE8 上，只有 'document.createStyleSheet' 方法对我来说是可靠的。只是为了让其他人知道遇到同样问题的人。

为了在来自modern.ie的实际IE8 win7 VM上工作，我必须在属性名称中加上引号：'type'和'rel'...

在 IE9 中对此进行了测试，它解决了我遇到的样式表注入问题！真的很感激！

【参考方案2】：

在不打开调试器的情况下打开 ie8。当您到达动态样式表之后...打开调试器并瞧，它们应该在那里。

【参考方案3】：

好像

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 

只要 url 是包含协议的完全限定 URI，也可以在 IE 中使用...

【参考方案4】：

这也可能与它有关 - 取自Microsoft Support article：

在 Microsoft Internet Explorer 版本中加载页面时，网页上的样式丢失或看起来不正确 ...

...出现此问题的原因是 以下条件为真 互联网浏览器：

所有样式标签 前 31 个样式标签后没有 应用。

后面的所有样式规则 前 4,095 条规则未应用。

开启 使用@import 规则的页面 不断导入外部风格 导入其他样式表的工作表， 超过三个的样式表 深层次被忽略。

【参考方案5】：

这似乎也适用于 IE：

var link = document.createElement('link'); link.rel = '样式表'; link.type = '文本/css'; link.href = '/includes/style.css'; document.getElementsByTagName('head')[0].appendChild(link);

【参考方案6】：

一旦 IE 处理了页面加载的所有样式，添加另一个样式表的唯一可靠方法是使用 document.createStyleSheet(url)

有关更多详细信息，请参阅 createStyleSheet 上的 MSDN article。

url = 'style.css';
if (document.createStyleSheet)

    document.createStyleSheet(url);

else

    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 

【讨论】：

document.createStyleSheet 的文档：ssicom.org/js/x276572.htm（MSDN 文章因 503 错误而失败...）。请注意，返回的对象是 DisphtmlStyleSheet 对象，而不是 LINK 元素。要从此对象获取链接标签，您需要访问 document.createStyleSheet('...').owningElement

我相信动态创建新样式标签<style>your style here</style>并将其添加到中也适用于IE。

更新 09/2013：不再支持 createStyleSheet 方法。欲了解更多信息，请访问：msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx

我下面的解决方案不同意，

我在下面尝试了@ekerner 的解决方案，但这是唯一适用于 IE9（模拟模式）的解决方案。