注入的链接样式表在IE7+中优先于现有样式。

Question

注入的链接样式表在IE7+中优先于现有样式。

javascriptcssinternet-explorercss-cascade

6

在级联动态样式表时，IE中似乎存在一个错误。有人知道是否有解决方法吗？请考虑以下内容：

<head>
    <style>#test{background:red;}</style>
</head>
<body>
    <div id="test">test</div>
    <script>
        var link = document.createElement('link');
        var style = document.getElementsByTagName('style')[0];
        link.rel = 'stylesheet';
        link.href = 'test.css';
        style.parentNode.insertBefore(link, style);
    </script>
</body>

注入的 'test.css' 包含 #test{background:green}。

尽管我们将 <link> 标签放在 <style> 标签之前，IE7+ 仍会使用注入的样式表覆盖样式，并将背景设置为绿色。

FF/Chrome 正确处理此问题，让样式标签优先于注入的链接标签，使背景保持为红色。

- David Hellsing

style 标签在 body 中是无效的（尽管所有浏览器都容忍）。不过，我同意您对 FF 和其他浏览器做法的看法是符合预期的行为。 - Pekka

是的，在头部也会产生相同的效果。我只是想举一个清晰的例子。 - David Hellsing

动态链接缺少“类型”属性 - 确实不是问题的根源，但应该修复以排除隐晦的错误。此外，我会发布一个有效的基于“head”的示例，出于同样的原因。动态元素是否在IE中根本没有被创建？其他以这种方式嵌入的样式是否有效？这适用于哪些版本的IE？ - Pekka

动态元素是由于它实际上覆盖了样式而创建的。如果按照您的建议进行了更正，则代码将更加合理。 - David Hellsing

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Sparks · Accepted Answer

我认为这个问题的原因是IE定义了insertBefore方法的方式。在IE中，你只能传递一个参数给insertBefore方法，它的行为与appendChild相同。我认为他们所做的是先插入，然后再移动。如果它们在插入点渲染，则会正确地呈现。

我唯一能想到的解决方法是以下（并不理想）：

    var link = document.createElement('link');
    var style = document.getElementsByTagName('style')[0];
    var newstyle = style.cloneNode(true);
    link.rel = 'stylesheet';
    link.href = 'test.css';
    style.parentNode.insertBefore(link, style);
    style.replaceNode(newstyle);