QA@IT

HTML5のarticle要素へのスタイルがIEで反映されない

4481 PV

HTML5でサイトを作り始めて、ふとIE8で確認したら、CSSのスタイルが崩れています。

具体的には、

<article>
  <p>hello</p>
</article>

のようなarticle要素にスタイルがあたっていません。何か良い対応策はありますか?

回答

例えばhead要素内に以下のように記述すれば問題を回避できます:

<!--[if lt IE 9]>
<script>
  document.createElement('article');
  document.createElement('section');
</script>
<![endif]-->

IE 8以前では、HTML5で新たに追加された要素 (articleやsectionなど) へのスタイル指定が無視されます。その回避策として、あらかじめJavaScriptのdocument.createElement()で該当の要素を作成しておくと、以後スタイル指定が (なぜか) 効くようになります。

これと同じことをやってくれるhtml5shivというライブラリがありますので、こちらを利用するのがオススメです。

ただし、この回避策は完全ではなく、HTMLの断片をAJAXで動的に追加したときや、印刷時にスタイルが適用されない問題があるようです。IEへの対応を重視するならHTML5の要素は使わず、divに置き換えるのが一番かもしれません。

参考にしたページ: HTML5.jsの中身を見てみよう (HTML5.js == html5shiv です)

編集 履歴 (2)
ウォッチ

この質問への回答やコメントをメールでお知らせします。