Таблица стилей для вставленной ссылки имеет приоритет над существующими стилями в IE7 + - PullRequest
Новая
       20

Таблица стилей для вставленной ссылки имеет приоритет над существующими стилями в IE7 +

4 голосов
/ 01 июля 2010

Кажется, есть ошибка в 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 делает это правильно и позволяет тегу стиля иметь приоритет над введенным тегом ссылки, поэтому фон остается красным.

1 Ответ

1 голос
/ 02 июля 2010

Я думаю, что причина этого в том, как 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);
...