Bug Tracker

#6105 closed bug ()

Opened February 16, 2010 05:55PM UTC

Closed November 11, 2010 11:09PM UTC

Last modified March 13, 2012 11:59PM UTC

$('head').append/appendTo('head') broken in MS Explorer

Reported by: av01d Owned by: av01d
Priority: low Milestone: 1.5
Component: core Version: 1.4.1
Keywords: head append Cc:
Blocked by: Blocking:
Description

Appending a linked stylesheet to the <head> of a page is broken on IE (tested on IE7 and IE8) in jQuery 1.4.1.

Used to be fine in 1.3.2.

Example:

<html>

<head>

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

</head>

<body>

<h1>jQuery bug</h1>

<script type="text/javascript">

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

</script>

</body>

</html>

or

<html>

<head>

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

</head>

<body>

<h1>jQuery bug</h1>

<script type="text/javascript">

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

</script>

</body>

</html>

In both cases, the appended stylesheet is not applied in IE. Of course, this all works fine when you use decent browsers (like FF and Chrome).

Live testcase here: http://misc.arjan.webpower.nl/jquery/

Attachments (0)
Change History (9)

Changed February 16, 2010 06:02PM UTC by av01d comment:1

There's another weird issue here. Consider the same code as above:

<html>

<head>

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

</head>

<body>

<h1>jQuery bug</h1>

<script type="text/javascript">

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

</script>

</body>

</html>

When this page is hosted on a secure server (https) and visited with Explorer, it issues a "mixed content" popup.

As explained above, the stylesheet is *NOT* applied in this case either (no difference in allowing or declining the mixed content).

Changed February 16, 2010 06:07PM UTC by av01d comment:2

Now with formatting, for better readability:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script> </head>
<body>
<h1>jQuery bug</h1>
<script type="text/javascript">
  $('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
</script>
</body>
</html>

Changed February 16, 2010 11:45PM UTC by rssaddict comment:3

I can confirm this is broken in 1.4.x and worked in 1.3.2

Changed February 21, 2010 09:20AM UTC by av01d comment:4

Just tested this with 1.4.2, both issues have been resolved.

Thank you very much!

Changed August 03, 2010 08:40PM UTC by dubunin comment:5

Replying to [comment:4 av01d]:

Just tested this with 1.4.2, both issues have been resolved. Thank you very much!

I still see this issue in 1.4.2 when updating the inner html of an element and that new html contains linked stylesheet(s). Again the stylesheet is not applied in IE7/8. Works fine in ff,safari,chrome.

Example:

$.ajax({

type: 'GET',

url: hash,

dataType: 'html',

cache: false,

success: function (data){

/* data = <link rel="stylesheet" type="text/css" href="style.css"/>

<div>...blah blah...</div>

*/

$('#' + t).html(data);

}

});

Changed October 27, 2010 06:38PM UTC by SlexAxton comment:6

milestone: 1.4.2 → 1.5
owner: → av01d
priority: → low
status: new → pending

Can you confirm this bug in 1.4.3 in a jsFiddle testcase? thanks!

Changed November 11, 2010 11:09PM UTC by trac-o-bot comment:7

status: pending → closed

Automatically closed due to 14 days of inactivity.

Changed August 31, 2011 01:41PM UTC by anonymous comment:8

easy fix

if (document.createStyleSheet)

document.createStyleSheet('stylesheet.css');

else

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

This is only an issue in older IE browsers.

Real developers dont pick THEIR browser preference, they develop for all browsers ;)

Changed February 02, 2012 10:41AM UTC by madhavan_t_p@yahoo.com comment:9

Just good option apply css head tag in jQuery

How can we apply this in to iframe src content?

Advance thanks to you