IEで動的にCSSを読ませる時の注意点 - カラスのダンプファイル

事の発端は、AJAXで画面をロードしまくったところ、突如IEがCSSを無視し始めたことだった。
調査を進めていくと、この問題は一定数以上画面をロードすると発生することがわかった。そして、〜IE9にはCSSを31個(ルールとしては4095個)しか読み込めないという制約があることが判明する。
http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits

ここでIEに文句を言ってもしょうがない。ぱっと思いつく手は、一つのStyleタグにスタイルをJSで流し込む方法である。

<body>

<!--ページ本体-->

<!--IEでCSSをヘッダ以外で読み込ませる場合、CSSは適用対象のHTMLより後に無くてはならない-->
<style id="forge" type="text/css"></style>
</body>

cssForge = function (style) {
  document.getElementById("forge").innerHTML += style;
}

この手は一見上手くいくのだが、IE8でエラーを吐く。未知のエラーとかそんな感じのヤツ。どうも style タグの innerHTML は〜IE8で読み取り専用らしい。
ここでIEに文句を言ってもしょうがない。ぱっと思いつく手は、innerHTML が読み取り専用でない要素を親にし、親からinnerHTMLを書き換える方法である。

<body>

<!--ページ本体-->

<div id="forge">
  <style type="text/css"></style>
</div>
</body>

cssForge = function (style) {
  var forge = document.getElementById("forge"),
    melt = forge.innerHTML.split(/<\/?style[^>]*>/gi);//IE8はstyleタグを大文字で挿入する為、i オプションが必須

  forge.innerHTML = '<style type="text/css">' + melt[1] + style + '</style>'
}

この手は一見上手くいくのだが、IE8でどうにも上手くいかない。F12でデバッガを立ち上げ、実際に挿入されたinnerHTMLを確認してみる。すると挿入したはずの