我正在使用 Prototype 的 PeriodicalUpdater 用 ajax 调用的结果更新一个 div。据我了解，div 是通过设置其 innerHTML 来更新的。
div 包裹在 <pre> 中标签。在 Firefox 中，<pre>格式按预期工作，但在 IE 中，所有文本都在一行中结束。
这是找到的一些示例代码 here这说明了问题。在 Firefox 中，abc与 def 在不同的线路上;在 IE 中它在同一行。
<html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
有人知道解决这个问题的方法吗？
最佳答案
设置 innerHTML 会启动一个 HTML 解析器，它会忽略多余的空格，包括硬回车。如果您更改方法以在字符串中包含
标记，它可以正常工作，因为 HTML 解析器保留了硬返回。您可以在运行示例页面后通过查看生成的源代码来查看实际情况:
<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>这里可以看到硬回车不再是
标签内容的一部分
关于javascript - <pre> 标签在 IE 中设置 innerHTML 时丢失换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/451486/