Does IE9 recalculate all styles after I use javascript to add a stylesheet?

Question

After using JS to add a new <link rel="stylesheet"> to my document, I expect a browser to request the new stylesheet and apply its styles, and IE 9 does that. However, IE 9 fails to respect the precedence of other styles in the document, eg. in a subsequent style block.

Given a stylesheet blue.css like this:

.box { background-color: blue; }

.. and a document like this ..

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <!--- The JS below inserts a stylesheet <link> here --->
    <style>.box { background-color: red; }</style>
  </head>
  <body>
    <div class="box">hello</div>
    <script>
      $(function(){
        $('<link rel="stylesheet" href="blue.css" type="text/css" />')
          .insertBefore($('style'));
      });
    </script>
  </body>
</html>

When all is said and done, IE 9 will show a blue box, and other browsers like FF 12 or Chrome 19 will show a red box.

Is IE just being lazy here? Is lazy too nice a word? Should I force IE to recalculate all styles by using a hack like this or this?

Does IE9 recalculate all styles after I use javascript to add a stylesheet?

0 Answers0