Question

我使用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

我该如何解决这个问题？

Answer 1

IE在将文本插入预标记时操作文本存在一些已知问题。

以下是一些更多信息：http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html

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

这样的东西

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

也可能以跨浏览器的方式发挥作用。

Answer 2

尝试在父标记

上使用CSS，而不是使用“pre”标记

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

More Info on white-space

如何在IE7中正确渲染<pre><code></code></pre>的内容？

2 个答案: