Question

当级联动态样式表时，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以正确的方式执行此操作，并使样式标记优先于注入的链接标记，因此背景保持红色。

Answer 1

我认为原因是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);

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

1 个答案: