Append CSS does not work correctly in IE8

Question

$("head").append('<link href="xxx.css" rel="stylesheet" type="text/css"/>');

I found this snippet is not working in IE 8?

possible dupe of http://stackoverflow.com/questions/6079702/how-to-append-style-sheets-in-ie-using-jquery — MikeM, Aug 15 '12 at 03:01
what version of jQuery are you using? i believe the latest version does NOT support IE8 — t q, Aug 15 '12 at 03:02
Is there any reason you can't just add it to the DOM of the specific page you need it on? I've never been fond of appending CSS files to the head after DOM load. — Ohgodwhy, Aug 15 '12 at 03:07
Check out this bug report on jquery: http://bugs.jquery.com/ticket/12145 — Jeemusu, Aug 15 '12 at 03:11
And yes this obviously a duplicate question of http://stackoverflow.com/questions/6079702/how-to-append-style-sheets-in-ie-using-jquery — jackalope, Aug 15 '12 at 03:21
I'm not 100% sure it's a duplicate question, while they are both problems with IE8 and appending CSS using jQuery. This could be a bug in jQuery to do with appending CSS using relative urls. — Jeemusu, Aug 15 '12 at 03:47

score 6 · Accepted Answer · edited May 23 '17 at 11:50

According to this bug report on the jquery site, there may well be a problem in IE8 with appending css files to the dom that contain relative links.

The poster of the bug suggests that adding it as follows may work:

    var style = document.createElement("link");
    style.setAttribute("type", "text/css");
    style.setAttribute("rel", "stylesheet");
    style.setAttribute("href", "xxx.css");
    jQuery("head")[0].appendChild(style);

Or that using an absolute url may also work:

    $('<link rel="stylesheet" type="text/css" href="http://yoursite.com/css/xxx.css">').appendTo('head');

Although he goes on to say that any files included through @import within the appended css file will also not load as expected.

I would suggest giving these test cases a whirl to see what loads for you and what doesn't (if it works you should get a grey background in the HTML window):

Method Used in OP's question: http://jsfiddle.net/vs5NC/20/

First possible solution from my answer: http://jsfiddle.net/vs5NC/17/

Second possible solution from my answer: http://jsfiddle.net/vs5NC/19/

If none of these work, it's possible that Chris Fulstow's answer to a similar question may be a viable solution.

Append CSS does not work correctly in IE8

1 Answers1