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

我使用JSON向ASP.net Web服務使用JQuery進行以下AJAX拉動：如何在IE7中正確渲染<pre><code></code></pre>的內容？

$.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

我該如何解決這個問題？

來源

2009-10-22 Carlsberg

IE在將文本插入到預標記時處理文本時存在一些已知問題。

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

你最好的選擇可能是嗅探IE與<br />元素替換\ n個字符或吸嗅對IE瀏覽器和使用IE唯一的innerText，而不是innerHTML的。像

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

也可能在跨瀏覽器的方式做的伎倆。

來源

2009-10-22 05:23:29

而不是使用「預」標籤的，請嘗試使用父標籤

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

More Info on white-space

CSS

來源

2009-10-22 07:57:03 Mike

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

回答

相關問題