CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer-8
learningtech
learningtech

Reputation: 33683

Jquery html() bug?

I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code

<!DOCTYPE html>
<html dir="ltr">
<head> 
        <style>
        header {display:block; background-color:#333; color:#fff;height:30px;}
        </style>
        <!--[if lt IE 9]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]--> 
</head>
<body>


<div id="bug">
        <header><h2>h2</h2></header>
</div>

<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>

<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>

You can see the code in action here - http://evermight.com/jquerybug/index.html

In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.

Why does an empty space affect the CSS appearance of the header tag in IE8?

Upvotes: 0

Views: 1080

Answers (2)

Ian Devlin
Ian Devlin

Reputation: 18870

You need the innershiv.

Upvotes: 1

Erik
Erik

Reputation: 20712

This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.

If you try your code, replacing

<header> .... </header>

with

<div class='header'> .... </div>

you'll find it works correctly, even with the leading space.

If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).

You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.

Upvotes: 4

Related Questions