Question

我动态加载一个css样式表（在jQuery的帮助下），如下所示：

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

这在Firefox和谷歌浏览器中运行良好，但在IE中不。

有任何帮助吗？感谢

Answer 1

一旦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'); 
}

Answer 2

您需要设置href attr last，并且只有在将link元素附加到head：

之后

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

Answer 3

这似乎也适用于IE：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);

Answer 4

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

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

...出现此问题的原因是   以下条件属实   Internet Explorer：



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



之后的所有样式规则   不适用前4,095条规则。



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

Answer 5

似乎

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

只要url是包含协议的完全限定URI，

也可以在IE中工作...

Answer 6

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

动态加载css样式表不适用于IE

6 个答案: