IE、pre、innerHTML

先来看个很简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML Test</title>
<script type="text/javascript">
<!--
function doPreTest() {
	var pre = document.getElementById('preTest');
	pre.innerHTML = pre.innerHTML;
}
//-->
</script>
</head>
<body>
<pre id="preTest">
1\. first line.
2\. second line.
3\. third line.
</pre>
<button type="button" onclick="doPreTest()">点我</button>
</body>
</html>

分别在IE和Firefox下运行会得到不同的结果，看代码会发现实际上只是执行了一条看起来是无意义的操作(这里只是举例子)：

1 2	var pre = document.getElementById('preTest'); pre.innerHTML = pre.innerHTML;

搜啊搜，终于找到了对此问题的描述：

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>

知道原因了还是不知道怎么解决，单纯针对pre标签的话，可以连pre标签一块替掉，或者再包一层pre，如下：

1 2	var pre = document.getElementById('preTest'); pre.innerHTML = '<pre>' + pre.innerHTML + '</pre>';

查看演示，textarea也可以用类似的思路解决：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML Test</title>
<script type="text/javascript">
<!--
function doPreTest() {
	var pre = document.getElementById('preTest');
	pre.innerHTML = '<pre>' + pre.innerHTML + '</pre>';
}
//-->
</script>
</head>
<body>
<pre id="preTest">
1\. first line.
2\. second line.
3\. third line.
</pre>
<button type="button" onclick="doPreTest()">点我</button>
</body>
</html>