JSFiddle - React, Tailwind, and code Playground

by IanY

HTML

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<p>There is a CSS rule which applies light blue background color on <code>time</code> elements.</p>
<p>Originally, there was only one <code>table</code> element which contained a <code>time</code> element.</p>
<p>We then cloned the <code>table</code> element once and added the cloned into the DOM, so there is now two <code>table</code> elements in the DOM, and each contains a <code>time</code> element.</p>
<p>However, in IE8 and below, the <code>time</code> element in the cloned <code>table</code> element has an incorrect tag structure like <code>&lt;:time&gt;2012-07-12&lt;/:time&gt;</code>. Therefore it is unable to be targeted by CSS.</p>
<table>
    <tr>
        <td>
            <time>2012-07-12</time>
        </td>
    </tr>
</table>

CSS

time {
    background: lightblue;
    }

JavaScript

$(document).ready(function() {
    $('table').clone().appendTo('body');
});