There seems to be a bug in IE when cascading dynamic stylesheets. Does anyone know if there is a workaround? Consider this:
<head>
<style>#test{background:red;}</style>
</head>
<body>
<div id="test">test</div>
<script>
var link = document.createElement('link');
var style = document.getElementsByTagName('style')[0];
link.rel = 'stylesheet';
link.href = 'test.css';
style.parentNode.insertBefore(link, style);
</script>
</body>
The injected 'test.css' contains #test{background:green}.
Even though we place the <link> before the <style> tag, IE7+ will override the styles with the injected stylesheet and apply green as background.
FF/Chrome do this the right way and lets the style tag take precedence over the injected link tag so the background stays red.