Skip to main content

Bug Tracker

Side navigation

#8307 closed bug (invalid)

Opened February 17, 2011 10:45PM UTC

Closed February 21, 2011 07:10PM UTC

Last modified March 14, 2012 11:36AM UTC

Using $.append() to <link> a stylesheet does not work in IE9

Reported by: JordanClark Owned by: JordanClark
Priority: low Milestone: 1.next
Component: manipulation Version: 1.5
Keywords: Cc: rwaldron, snover
Blocked by: Blocking:
Description

Using $.append() to <link> a stylesheet fails in IE9.

#7350 identifies this bug, but it was closed as there was no test case given initially, and no response from the reporter when one was requested.

Here's a link to a test case:

http://v7.galaxy-inc.com/developmenttests/csstest/css.html

This test case uses jQ 1.5, but I tested with 1.4.2, 1.4.3, and 1.4.4 with the same results.

This page loads 5 CSS stylesheets. Each stylesheet contains a single rule which applies to a different span.class, and each is loaded with a different method.

All the stylesheets load correctly with FireFox, Chrome and Safari, IE7 and IE8.

Using IE9-RC1 (9.0.8080.16413) stylesheets linked via $.append() are not loaded.

In the CSS tab of IE Developer Tools, the affected stylesheets report the error: "This stylesheet cannot be viewed because it's source is in a different domain than the page." Capturing requests from the Network tab shows that they are requested and served properly, but IE is just not using them.

Changing the document mode to IE7 or IE8 resolves the issue.

I can reduce this test case further if deemed necessary, but I found it useful to see examples of what does work alongside what doesn't.

Attachments (0)
Change History (8)

Changed February 19, 2011 01:42PM UTC by Cameron Cooke <web@cameroncooke.com> comment:1

I can verify this issue.

While debugging why my webapp's stylesheet was not being loaded in IE9 I discovered this messsage in IE9's developer tools console:

"This stylesheet cannot be viewed because its source is in a different domain than the page"

The stylesheet that IE9 refuses to load is created using this method:

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

I can confirm that the stylesheet in indeed in the same domain as the page.

Changed February 20, 2011 02:29PM UTC by jitter comment:2

component: unfiledmanipulation
owner: → JordanClark
priority: undecidedlow
status: newpending

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

After checking your report and test site I can't fully reproduce what your are claiming. Your page does indeed work in FF, Chrome and Opera. But when opening the site with IE 6/7/8 all fail the two $.append() tests (IE6 randomly also fails the $.html() test).

I suspect this may have to do with the fact that your test page doesn't provide any DOCTYPE (!!!), which puts any browser into quirks-mode. The X-UA-Compatible meta-tag you added does alleviate the missing DOCTYPE to some extend for IE but the combination might still be the cause for your problems. So please try either removing the meta-tag and thus putting IE also in quirks-mode or better add a valid DOCTYPE declaration.

Also with my test case which is fully valid html I don't have any failures in IE 6/7/8. I sadly can't test with IE9 but I guess it would also work with IE9.

So please try my test case with IE9RC and report your findings.


How to report bugs

Changed February 21, 2011 04:05PM UTC by JordanClark comment:3

status: pendingnew

Oops, oversight on my part in forgetting the DOCTYPE.

I added a DOCTYPE to the test page, and I'm still seeing the same issue in IE9.

I can confirm that when using IE7/8, rather than merely changing the document mode in IE9, both $.append() cases fail. But, switching to use 1.4.4, rather than 1.5, both browser pass. (I created a new test page using 1.4.4, http://v7.galaxy-inc.com/developmenttests/csstest/css144.html)

Strangely not seeing any failures with your fiddle, which looks all but identical to my test page(s).

Unfortunately, I cannot test your fiddle in IE9 either. jsFiddle seems to be having it's own IE9 problems; All of the iframes have 0-height and can't be re-sized, which is why I didn't use it for my original test case.

Let me know if I can do anything else to help here.

Changed February 21, 2011 06:22PM UTC by jitter comment:4

_comment0: You can open my test case in "non-code" view: http://jsfiddle.net/jitter/ZURqw/show1298312648543377
cc: → rwaldron, snover
status: newpending

You can open my test case in "non-code" view: http://jsfiddle.net/jitter/ZURqw/show

Only difference should be that my test case has no meta-tag for the X-UA-Compatible stuff.

Changed February 21, 2011 06:31PM UTC by snover comment:5

jitter’s testcase worksforme in IE9. The original does not, but it seems to probably be not a bug in jQuery if it works at all.

Changed February 21, 2011 06:50PM UTC by JordanClark comment:6

status: pendingnew

Opening jitters test in non-code view worked for me in IE9-RC1.

I removed the meta X-UA-Compatible tag from my original test case, with no effect.

The only other difference between the two was that you were using the full URL for the stylesheets, whereas I was relying on the relative path.

Changing my $.append() <link>s to use the full URL fixed the problem.

While this doesn't seem like a true bug in jQuery, I finds it interesting that using appendChild() does not have this limitation, but using $.append() does.

Changed February 21, 2011 07:10PM UTC by snover comment:7

resolution: → invalid
status: newclosed

IE irritatingly munges hrefs in innerHTML strings (forcing relative to absolute). There’s no way to work around this but it sounds like it is the source of your problem.

Changed March 28, 2011 04:53PM UTC by manciaux comment:8

i have the same problem. It works in jsFiddle because the href's are full urls. It fails if I take the same example on my machine and try to use relative urls in the <link href's>.