<pre><code></code></pre>의 내용을 IE7에서 올바르게 렌더링하는 방법은 무엇입니까?

Question

다음 JSON을 ASP.net 웹 서비스에 사용하여 다음 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

가장 좋은 방법 대신 innerHTML을의, IE를 위해 냄새와 <br /> 요소와 \ n 문자를 교체하거나 IE에 대한 냄새와 IE 유일한 innerText와를 사용할 수 있습니다. 예 :

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

트릭을 브라우저 방식으로 수행 할 수도 있습니다.

Answer 2

대신 "사전"태그를 사용하는 부모 태그

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

More Info on white-space

에 CSS를 사용해보십시오