IE не применяет динамически загружаемый CSS

Question

Похоже, что IE (по крайней мере, более старые версии) не применяет CSS, который загружается динамически.Это может быть проблемой, если вы загружаете страницу, содержащую CSS, через ajax в «лайтбокс» или «colorbox».

Например, допустим, что на вашей HTML-странице есть div с именем «taco»:

<style>#taco {color:green;}</style>
<div id="taco">Hola Mundo!</div>

"Привет, Мундо!"будет зеленым, так как CSS был включен в исходную HTML-страницу.Затем происходит некоторый Javascript, который добавляет это к «taco»:

<style>#taco {color:green;}</style>
<div id="taco">
  Hola Mundo!
  <style>#burrito {color:red;}</style>
  <span id="burrito">mmmm burrito</span>
</div>

Во всех браузерах, кроме IE, шрифт буррито будет красным.

Так есть ли способ сделать это в IE?Кажется, что нет.

Answer 1

Тег style разрешен только в разделе head. Размещение его в другом месте просто недопустимо, и это не имеет никакого отношения к IE.

Дополнительная информация .

Кстати, , чтобы решить вашу проблему, если вы не можете поместить стили в глобальную таблицу стилей, вы можете использовать атрибут 'style' для изменения элементов:

<p style="...">

Или вы можете использовать iframe, но тогда вам придется обслуживать целую страницу вместо нескольких тегов.

Answer 2

Возможно, вы захотите начать использовать метиз .CSS jQuery для таких динамических изменений стиля.

$("#jane").css('color', '#0F0');

Или просто Джэйн Javascript:

document.getElementById['sally'].style.color = '#0F0';

EDIT:

Пусть ваш аякс впрыснет это:

<div id="jane">        
    <div id="sally">Hi, I'm Sally!</div>
    <script>document.getElementById['sally'].style.color = '#0F0';</script>
</div>

Или почему бы просто не внедрить элементы со встроенными стилями, вычисленными на стороне сервера?:

<div id="jane">        
    <div id="sally" style="color:#0F0">Hi, I'm Sally!</div>
</div>

Answer 3

Если нет способа сделать это, и вы не хотите изменять свой код на стороне сервера, вот способ для очень простых элементов стиля:

// In the callback function, let's assume you're using jQuery
success: function( data ) {

    // Create a dummy DOM element
    var el = document.createElement( 'div' );

    // Add the html received to this dummy element
    el.innerHTML = data;

    // so that you can select its html:
    var s = $( 'style', el ).text();

    // Delegate to another function, it's going to get messy otherwise
    addRules( s );
}

function addRules( s ) {
    // First, separate your strings for each line
    var lines = s.split( '\n' ),

    // Declare some temporary variables
        id,
        rule,
        rules;

    // Then, loop through each line to handle it
    $.each( lines, function() {
        id = $( this ).split( ' ' )[ 0 ];

        // Get the rules inside the brackets, thanks @Esailija
        rules = /\{\s*([^}]*?)\s*\}/.exec( $( this ) )[ 1 ];

        // Split the rules
        rules = rules.split( ';' );

        $.each( rules, function() {
            rule = $( this ).split( ':' );

            // Apply each rule to the id
            $( id ).css( $.trim( rule[ 0 ] ), $.trim( rule[ 1 ] ) );
        } );
    } );
}

Итак, да, я делаю CSS-парсер.

Это очень простой парсер, однако.

Он будет анализировать только следующие правила:

#some-id { some: rule; another: rule; }
#other-id { some: rule; yet: another; rule: baby; }

Answer 4

Если вы динамически (через AJAX) загружаете связанную таблицу стилей в веб-страницу, IE <8 даже не распознает тег LINK.</p>

Если вы динамически загружаете тег SCRIPT, IE <8 не будет его анализировать.</p>

Джерон верен, единственный способ динамически загрузить HTML и стилизовать его с помощью iframe, но я проверяю идею переформатирования контейнера