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メソッドに1つのパラメーターのみを渡すことができ、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 に答える