javascript – Internet Explorer中的HTML5元素：运行时插入

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

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

这是我正在注入页面的标记块的示例：

<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标签来测试我的理论,这似乎解决了现在的问题,代价是语义标记.但我想知道是否有更多面向未来的解决方法.

解决方法

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

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