IE doesn't apply dynamically loaded 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>