IE不适用于动态加载的CSS

Question

It appears as though IE (older versions at least) does not apply CSS that is loaded dynamically. This can be a pain point if you load a page containing CSS via ajax into a "lightbox" or "colorbox".

For example, say your HTML page has a div named "taco":

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

"Hola Mundo!" will be green since the CSS was included in the original HTML page. Then some Javascript happens and appends this to "taco":

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

In all browsers except IE, burrito's font will be red.

So is there a way to do this in IE? It seems as though there is not.

Answer 1

The style tag is only allowed in the head section. Placing it somewhere else is simply invalid and that has nothing to do with IE.

More information .

By the way , to solve your problem if you can´t put the styles in a global style-sheet, you can use the 'style' attribute to modify elements:

<p style="...">

Or you can use an iframe but then you'd have to serve a whole page instead of just a few tags.

Answer 2

You might want to start using jQuery's .CSS methed for dynamic style changes like that.

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

Or just plain jane Javascript:

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

EDIT:

Have your ajax inject this:

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

Or Why not just inject elements with inline styles computed server side?:

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

Answer 3

If there is no way to do this, and you don't want to change your server-side code, here is a way for very simple style elements:

// 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 ] ) );
        } );
    } );
}

So, yeah, basically I'm making a CSS parser.

This is a very basic parser however.

It will parse the following rules only:

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

Answer 4

If you load a linked stylesheet dynamically (via AJAX) into a webpage, IE < 8 does not even recognize the LINK tag.

If you load a SCRIPT tag dynamically IE < 8 will not parse it.

Jeron is correct, the only way to dynamically load HTML and have it styled is via iframe, but I am testing the idea of reflowing the container .