HTML5 elements in Internet Explorer: runtime inser

问题:

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.

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>

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.

回答1:

Maybe this will help: http://jdbartlett.github.com/innershiv/

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.

回答2:

I think I'd just use a <div> and live with it.

The purpose of semantic markup is to help the search engines understand what the page content is about. Dynamic content like this which is loaded after the main page load may not be seen by the search engines, so semantic markup is perhaps a moot point.

回答3:

By default, the HTML5 elements like header, article etc are inline.

In your CSS file, you should set display: block rule for them.

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

Hope this helps you!