標準モードのIE6、IE7におけるCSS「white-space:pre」とinnerHTML

IEには互換モードと標準モードでレンダリングに差があるのは知ってますか?
この標準モードだけ動作するスタイルシートのwhite-space: preだけど
innerHTMLを使って文字を追加すると属性が無効になり、描画が崩れる。
確認できたのはIE6とIE7。Firefoxは問題ない。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 EN//"
 "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<script>
function test()
{
	document.getElementById("foo").innerHTML += "test";
}
</script>
</head><body>
<a href="javascript:test()">GO!</a>
<div id="foo" style="white-space: pre">
hoge1
hoge2
hoge3
</div>
</body></html>

色々検証してみた(予想)が、これは作成者がwhite-space: preを適用した場合IEは何をしているかというと、

何も適用していないHTML

hoge1\r\nhoge2\r\nhoge3\r\n
にwhite-space: preが指定されていたら、\r?\nを<br>に置き換えたものを表示するのだが、
innerHTMLには<br>を変換していない(あるいは\r?\nを抜いた状態の)HTMLを保持したままの状態なので、
innerHTMLを変更すると、<br>に変換していない状態のHTMLで描画してしまうということになる。

なんで<br>?という人はこのinnerHTMLをFormに投げてPOSTするとよく分かると思う。
この現象を回避するにはDOM動作でよく使用するappendChildを使う。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 EN//"
 "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<script>
function test()
{
	document.getElementById("foo").appendChild(
		document.createTextNode("test")
	);
}
</script>
</head><body>
<a href="javascript:test()">GO!</a>
<div id="foo" style="white-space: pre">
hoge1
hoge2
hoge3
</div>
</body></html>

こうすることで、描画が崩れることもなく文字が追加される。ただし、これは裏では

#text
#text
#text

…と#textを追加しているだけで、根本的解決法ではない点は注意。
<や>も&lt;というように変換されるし使えないかも。