Problem with inserting <link> into <head> in IE with 1.4

Problem with inserting <link> into <head> in IE with 1.4

 So for a site I maintain, InsideCCS, I have the following code for dynamically inserting stylesheets on a page:



 
    
  
  1. var newCSS = [];
    2. 
  

    3. 
  
  3. $.each(options.styles, function(index) {
    4. 
  
  4.  newCSS.push('<link href="/styles/'+options.styles[index]['href']+'" media="screen" rel="stylesheet" type="text/css" class="dynamic_css" />');
    5. 
  
  5. });
    6. 
  

    7. 
  
  7. $('head').append(newCSS.join(""));
    8.


This code can be seen at line 156 in http://insideccs.com/scripts/global.js. This worked perfectly well using jQuery 1.3.2 (and back through to 1.2.6 which was in use when first developed). However, by moving to jQuery 1.4.0 the stylesheets don't visually apply to the page when inserted.

Using the IE Developer Toolbar I can verify that they're inserting into the <head> tag but the page doesn't redraw with the new rules. Indeed, the following code DOES cause the new stylesheets to visually take hold: 


  
    
   
  1. if ($.browser.msie) { $('head').html($('head').html()); } 
    2.


However, this is buggy and causes intermittent crashes in some IE7 machines.


I've tried refactoring this in various ways but all to no avail. For instance,


  
    
   
  1. $.each(options.styles, function(index) {
    2. 
   
  2.     $('<link />', {
    3. 
   
  3.         href: '/styles/' + options.styles[index]['href'],
    4. 
   
  4.         media: 'screen',
    5. 
   
  5.         rel: 'stylesheet',
    6. 
   
  6.         type: 'text/css',
    7. 
   
  7.         'class': 'dynamic_css'
    8. 
   
  8.     }).appendTo('body');
    9. 
   
  9. });
    10.


Shows no difference in behavior in either working browsers or in IE.


Any ideas?