dynamically added web content in IE fails to display properly

If you're doing content modifications through DOM operations driven by JavaScript you must be aware that IE doesn't pick the CSS style dictated by the class name of the newly added elements.

So if you add an element like this:

<div id="test_id" class="test_class">example<div>

and your style comes from a CSS include like this:

<link rel="Stylesheet" href="css/default.css" type="text/css" media="screen,print" />

and you have styles corresponding to test_class (e.g. .test_class selector) in the externally included default.css file, they won't be applied.

This is a rather egregious issue, affecting only IE, that bit me several times.

One workaround is to use inline CSS, through the style attribute of the element. That seems to be working fine.

It'd be interesting to see if inline CSS in the <style> element gets picked up too. Also I wonder if the same issue is present for id selectors (e.g. #test_id selector).