使用 HTML5 innerShiv 修复插入的 HTML5 内容

在当今使用 HTML5 时，许多人知道您需要包含 “HTML5 shiv” 来确保 CSS 能够识别并能够在尚未支持 HTML5 的浏览器中为这些元素设置样式。

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

感谢 Remy Sharp、Jon Neal、John Resig 和所有为该想法做出贡献的人。 为了那些不支持 HTML5 的浏览器的利益，最好将许多 HTML5 元素重置为块级元素，因为它们应该是这样的。

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

现在我们都准备使用和设置 HTML5 元素的样式。 但是等等！ 如果我们通过 JavaScript 动态地将 HTML5 添加到页面中会发生什么？

var s = document.createElement('div');
s.innerHTML = "<section>Hi!</section>";
document.body.appendChild(s);

或在 jQuery 中

$("body").append("<section>Hi!</section>");

支持 HTML5 的浏览器运行良好，但 Internet Explorer 再次无法识别新元素，也无法对其应用 CSS。

Joe Bartlett 为这个问题编写了一个很棒的解决方法，名为 HTML5 innerShiv，我认为更多人应该知道它。

使用它

请注意，此脚本不需要 jQuery。 它只是普通的 JavaScript，并且可以与任何库或根本没有库一起使用。

1. 下载

下载脚本 并将其插入到您的页面中。 或者，如果您想避免额外的 HTTP 请求，可以将脚本复制并粘贴到您已加载的其他 JavaScript 中。

2. 在插入之前将所有 HTML 内容包装在 innerShiv 函数中

以下是与上面相同的 jQuery 示例，已使用 innerShiv 进行修改。

$("body").append(innerShiv("<section>Hi!</section>"));

快速演示。