IE ignores styles for dynamically loaded content

Question

I\'ve seen a couple similar questions here with no real answers. Hopefully someone notices this...

IE 8 and below are refusing to apply styles from the css styleshee

Answer 1

To be safe, use jQuery to apply said classes after the append:

$('#content').append('<section id="about"><h1>About Us</h1></section>');
$("#about").addClass("foo");

Answer 2

The problem is that this line of code does not generate the desired set of HTML objects in IE7/IE8:

$('#content').append('<section id="about"><h1>About Us</h1></section>'); 

If you look in the IE DOM inspector, you don't see the desired tags nested appropriately so the DOM is messed up and thus the style rules don't work appropriately. The issue is how things are getting inserted into the DOM by jQuery. I think it's a jQuery interaction problem with IE more than anything else.

Without stepping through the code in detail on IE, I can't say whether it's actually a jQuery issue or an IE issue or just one of those weired combo bugs. Obviously, IE has earned the right of first blame for it's previous transgressions, but it's probably better to just avoid this bug by using some more straightforward code.

Breaking down the code a bit, this code works for me in IE7: Here, we create a single tag, add some innerHTML to it and then insert that root tag using append() rather than give HTML to append.

$(document).ready(function() { 
    var section = $("<section>");
    section.attr("id", "about");
    section.html('<h1>About Us</h1>');
    $('#content').append(section);
});

You can see the revised code work here: http://jsfiddle.net/jfriend00/vEST8/

I don't know why IE has a problem with appending an whole HTML string directly via jQuery, but I have seen this problem before.