javascript - 动态添加的样式表标记在 IE 下不生效

Question

我正在使用 JavaScript 向页面动态添加样式表:

document.getElementsByTagName('head')[0].innerHTML += '<link href="/assets/standards/global.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/header.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/footer.css?body=1" media="screen" rel="stylesheet" type="text/css" />';

在 Chrome 下，一切都以适当的样式呈现；在 IE8 和 IE9 下，所有内容都呈现没有样式。有什么想法吗？

(注意:在我的情况下，无法通过 document.createElement + head.appendChild 注入(inject)样式表，因此这不是解决方案。另请注意:在这种情况下我也不能使用 jQuery。)

背景:我在 JavaScript 中添加样式表，因为当文档模式为 < IE9 时我需要添加不同的样式表:

<!--[if gt IE 8]>
    <%= javascript_tag do %>
        if (document.documentMode < 9) {
            // Browser Mode = IE9+, Document Mode = IE8-.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("ie8").gsub("\n", '').html_safe %>';
        }
        else {
            // Browser Mode = IE9+, Document Mode = IE9+.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("core", "widgets").gsub("\n", '').html_safe %>';
        }
    <% end %>
<![endif]-->

Answer 1

我以前遇到过这个问题并记得使用 document.createStyleSheet 代替:

document.createStyleSheet('mycssfile.css");

这是一个仅适用于 IE 的函数，因此您使用这样的回退会更安全:

if(typeof document.createStyleSheet == 'function') {
  document.createStyleSheet('mycssfile.css');
} else {
  //your document.getElementsByTagName('head')[0].innerHTML or some jQuery/favourite framework equivalent
}

这个函数的一个警告是它在 IE11 中被弃用了。 ( http://msdn.microsoft.com/en-us/library/ie/ms531194(v=vs.85).aspx )