PGメモ

非エンジニアの記録

jqueryとIE HTML5のタグでハマった Ajaxで追加した要素にCSSが効かない

jqueryを使い、Ajaxで非同期にデータを取得しそれをjsで追加するという作業。
firefoxchromeなどでは問題なく動くが、IEさんだけおかしい。
追加した要素にCSSが適用されないのである。html5.jsも使ってるのにね

<article class="hoge">
  <div>
    <p>something</p>
  </div>
</article>

上記を次々と追加していく。

$('#content').after('<article class="hoge"><div><p>something</p></div></article>');

余談だがcloneはarticleの子要素をなぜかコピーしてくれなかったので使えなかった。
動きとしては問題ないが、CSSが効かないのである。

★気づきました
悩み悩んで気が付きました。DOM構造がおかしい。
DOMインスペクタで見てみると、見た目の構造はおかしくないが
article内のdivがarticleの子要素して認識されておらず、間に挟まれているだけ?という感じになっていた。

★どういうこと?
articleタグ後から追加すると、それをIEがうまいこと認識せずDOM構造がへんちくりんになってしまったのだと思う。
毎回html5.jsを読み込ませればいけるのか?