jqueryとIE HTML5のタグでハマった Ajaxで追加した要素にCSSが効かない
jqueryを使い、Ajaxで非同期にデータを取得しそれをjsで追加するという作業。
firefoxやchromeなどでは問題なく動くが、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を読み込ませればいけるのか?