javascript - Internet Explorer 中的 HTML5 元素 : runtime insertion

Question

我在 Internet Explorer 7 及更高版本(未测试 IE6)中使用 HTML5 元素时遇到问题。我知道默认情况下，IE 拒绝识别常见的 HTML5 元素，如“文章”或“标题”，而不使用 Javascript“shiv”。我使用 modernizr (http://www.modernizr.com) 强制 IE 识别这些元素，以便我可以将 CSS 样式应用于它们。到目前为止一切顺利。

现在的问题是应用程序使用 Javascript 获取某些 HTML 片段(包含 HTML5 标记)并在运行时将它们插入到文档中。在所有其他浏览器上，这可以完美运行，但在 IE 中，在运行时插入的元素无法使用 CSS 设置样式。

这是我注入(inject)页面的标记 block 的示例:

<article id="block-1" class="block">
  <a href="#">
      <h2>Title</h2>
      <p>Text</p>
      <img src="http://dummyimage.com/100x100" width="100" height="100" alt="placeholder" />
  </a>
</article>

我已经通过用普通 div 替换 article 标签来测试我的理论，这似乎暂时解决了问题，但代价是语义标记。但我想知道是否还有更多面向 future 的解决方法。

Answer 1

也许这会有所帮助:http://jdbartlett.github.com/innershiv/

innerShiv 是一个函数，它获取您的 HTML 字符串，将其添加到 IE 中的隐藏文档附加元素，并返回 IE 安全文档片段或集合。