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

Кажется, что IE (более старые версии, по крайней мере) не применяет CSS, который загружается динамически. Это может быть точкой боли, если вы загружаете страницу, содержащую CSS, через ajax в "lightbox" или "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? Кажется, что нет.

Ответ 1

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

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

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

<p style="...">

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

Ответ 2

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

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

Или просто простая jane Javascript:

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

EDIT:

Попросите ваш ajax вставить это:

<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>

Ответ 3

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

// In the callback function, let 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 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; }

Ответ 4

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

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

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