How can I make the content of <pre class = "prettyprint-override"> <code> </code> </pre> render correctly in IE7?
I am doing the following AJAX pull with JQuery using JSON for ASP.net web service:
$.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 implements a very simple WebMethod Foo () that returns the following:
[WebMethod]
public string Foo() {
return "multi" + Environment.NewLine + "line" + Environment.NewLine + "comment";
}
Finally, I show the result
<pre id="justpre"></pre>
<pre><code id="precode"></code></pre>
Firefox and Chrome display the return value as a multi-line comment. However, IE7 makes it as a one-liner with no line breaks.
FF, Chrome:
multi
line
comment
IE7:
multi line comment
How can I fix this?
source to share
IE has some known issues with manipulating text when pasting it into a pre-tag.
Here's some more information: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
Your best bet is to sniff for IE and replace characters with \ n characters, <br />
or use for IE and only use IE inner text instead of innerHTML. Something like
document.createTextNode("multi\nline\ncomment");
can also do the trick in cross browser.
source to share