如何使 <pre><code></code></pre> 的内容在 IE7 中正确呈现？答案

【问题标题】：How to make contents of <pre><code></code></pre> render correctly in IE7?如何使 <pre><code></code></pre> 的内容在 IE7 中正确呈现？
【发布时间】：2010-12-08 23:20:28
【问题描述】：

我使用 JSON 对 ASP.net Web 服务使用 JQuery 进行以下 AJAX 拉取：

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "TestWebService.asmx/Foo",
data: "{}",
dataType: "json",
success: function(msg) {
    $("#justpre").html(msg.d);
    $("#precode").html(msg.d);
} } );

TestWebService 实现了一个非常简单的 WebMethod Foo()，它返回以下内容：

[WebMethod]
public string Foo() {
    return "multi" + Environment.NewLine + "line" + Environment.NewLine + "comment";
}

最后，我显示结果

<pre id="justpre"></pre>

<pre><code id="precode"></code></pre>

Firefox 和 Chrome 将返回的值显示为多行注释就好了。然而，IE7 将其呈现为没有换行符的单行。

FF, Chrome:
multi
line
comment

IE7:
multi line comment

我该如何解决这个问题？

【问题讨论】：

标签： asp.net jquery html internet-explorer line-breaks

【解决方案1】：

IE 在将文本插入前置标记时存在一些已知问题。

您最好的选择可能是嗅探 IE 并将 \n 字符替换为 <br /> 元素或嗅探 IE 并仅使用 IE 的 innerText，而不是 innerHTML。像

document.createTextNode("multi\nline\ncomment");

也可以通过跨浏览器的方式来解决问题。

【讨论】：

【解决方案2】：

不要使用“pre”标签，而是尝试在父标签上使用 CSS

.theParentTagOfPre {
   white-space: pre-wrap;
}

More Info on white-space

【讨论】：