4

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

4

1 回答 1

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);
于 2010-07-02T14:57:02.557 回答