Как сделать так, чтобы содержимое <pre><code></code></pre> правильно отображалось в IE7? - PullRequest
Новая
       17

Как сделать так, чтобы содержимое <pre><code></code></pre> правильно отображалось в IE7?

2 голосов
/ 22 октября 2009

Я выполняю следующее извлечение AJAX с помощью JQuery с использованием JSON для веб-службы ASP.net: 

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

Firefox и Chrome отображают возвращенное значение в виде многострочного комментария. Однако IE7 отображает его как одну строку без разрывов строк. 

FF, Chrome:
multi
line
comment

IE7:
multi line comment

Как я могу это исправить?

Ответы [ 2 ]

2 голосов
/ 22 октября 2009

В IE есть некоторые известные проблемы с манипулированием текстом при вставке его в предварительный тег.

Вот еще немного информации: http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html

Лучшим вариантом может быть прослушать IE и заменить символы \ n элементами <br /> ИЛИ прослушать IE и использовать IE только innerText вместо innerHTML. Что-то вроде 

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

может также выполнить кросс-браузерную задачу.

0 голосов
/ 22 октября 2009

Вместо использования тега "pre" попробуйте использовать CSS для родительского тега 

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

Подробнее о пробелах

...