CODEWITHSUNDEEP
jqueryhtmlinternet-explorer-8html5shiv
Jayne Mast
Jayne Mast

Reputation: 1487

IE8 HTML5 elements within cloned parent elements are not recognised

I'm using html5shiv for enabling styling for HTML5 elements.

When I clone a non-HTML5 element (and only non-HTML5 elements) that have HTML5 element children, the child is not recognised by IE8.

In the following example, the first section is pink, while the cloned version is not.

<!doctype html>
<html>
<head>      
    <style>
        div section { background:#f0f; display:block; }
    </style>

    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <script>
        jQuery(function ($) {
          $('#article').append($('div').clone());
        });
    </script>
</head>
<body>
    <article id="article">
        <div><section>This section should have a pink background.</section></div>
    </article>
</body>
</html>

jsbin example: http://jsbin.com/yuqeriwoxeqa/1/

Upvotes: 0

Views: 173

Answers (1)

RiZKiT
RiZKiT

Reputation: 2511

It's a result of IE8 not supporting html5 elements natively. Try one of the following two solutions:

$('#article').append($('div').get(0).cloneNode()); or http://pastie.org/935834

Upvotes: 0

Related Questions