HTML5 Elements in Internet Explorer: Insert Runtime

Question

I have a problem using HTML5 elements in Internet Explorer 7 and above (not testing IE6). I know that by default IE refuses to recognize common HTML5 elements, such as "article" or "heading", without using javascript "shiv". I used modernizr (http://www.modernizr.com) to make IE recognize these elements so that I can apply CSS styles to them. So far so good.

Now the problem is that the application uses Javascript to extract certain HTML fragments (containing HTML5 markup) and inserts them into the document at runtime. In all other browsers this works flawlessly, but in IE elements inserted at runtime cannot be written using CSS.

Here is an example of a markup snippet that I insert on a 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 tested my theory by replacing the article tag with a generic div, which seems to solve the problem right now through semantic markup. But I would like to know if there are any more reliable ways to solve the problem.

Answer 1

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

innerShiv - , HTML-, , IE, , IE.

Answer 2

, <div> .

- , . , , , , , , .

Answer 3

HTML5, header, article .., inline.

CSS display: block.

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

, !