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

问题描述

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

I have a problem with using HTML5 elements in Internet Explorer 7 and up (not testing IE6). I know that by default, IE refuses to recognize common HTML5 elements like "article" or "header" without the use of a Javascript "shiv". I've used modernizr (http://www.modernizr.com) to force IE to recognize these elements to that I can apply CSS styles to them. So far so good.

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

The problem now is that the application uses Javascript to fetch certain HTML fragments (containing HTML5 markup) and inserts them into the document at run-time. On all other browsers, this works flawlessly, but in IE, elements inserted at runtime can't be styled with CSS.

以下是我注入页面的标记块的示例：

Here's an example of the chunk of markup that I'm injecting into the page:

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

I've tested my theory by replacing the article tag by a common div, which seems to solve the problem for now, at the expense of semantic markup. But I'd like to know if there are any more future-proof workarounds.

推荐答案

也许这会有所帮助：

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

innerShiv is a function which takes your HTML string, adds it to a hidden document-appended element in IE, and returns an IE-safe document fragment or collection.

这篇关于Internet Explorer中的HTML5元素：运行时插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！