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

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.

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

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.