nanto_viさんの以下記事にて、より詳しくまとめられており、回避策も示されています。
本エントリは飛ばして、こちらをご参照ください。
IEで、Element#setAttributeでclassを設定した要素にCSSが適用されなかった。
以下コードで1〜3の3つのSPAN要素を作った。
3のみCSSが効かず、背景が赤くならなかった。
<style type="text/css">
.target {
background-color:red;
}
</style>
<body>
<span class='target'>1</span>
</body>
<script>
var span = document.body.appendChild(document.createElement('span'));
span.innerHTML='2';
span.className='target';
var span = document.body.appendChild(document.createElement('span'));
span.innerHTML='3';
span.setAttribute('class', 'target');
</script>
このときinnerHTMLを見ると以下のようになった。
setAttributeで設定したものだけ内部的に結果が異なっているように見える。
<SPAN class=target>1</SPAN> <SPAN class=target>2</SPAN> <SPAN class="target">3</SPAN>
Internet Explorer 7.0.5730.11にて確認した。