Элементы HTML5 в Internet Explorer: вставка во время выполнения

Question

У меня проблема с использованием элементов HTML5 в Internet Explorer 7 и более поздних версиях (без тестирования IE6).Я знаю, что по умолчанию IE отказывается распознавать общие элементы HTML5, такие как «article» или «header», без использования 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>

Я проверил свою теорию, заменив тег article общим div, что, похоже, решает проблему на данный момент, вза счет семантической разметки. Но я хотел бы знать, есть ли еще какие-то обходные пути, подходящие для будущего.

Answer 1

Может быть, это поможет: 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; }

Надеюсь, это поможет вам!