IE8 PRE标记问题

Question

我提到了其他类似的讨论.以下是该讨论的链接.

内部的代码在IE8上排成一行

外部HTML工作正常.但我的要求是内部HTML.不使用外部HTML的原因是我使用的是AngularJS,它具有HTML本身的条件.所以我需要将内容添加到innerHTML中.

这是HTML.

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

这是支持它的JS.

var elem = $(".pre.fileContent")[1];
if (elem.tagName == "P" && "innerHTML" in elem){
    elem.innerHTML = "<pre>" + elem.innerHTML + "</pre>";
}

我也试过替换"<pre>" + elem.innerHTML + "</pre>"导致的范围变量"<pre>" + $scope.file.fileContent + "</pre>";

这是我在IE8上遇到的错误.

Error: Unknown runtime errorundefined

如果我<pre>从elem.innerHTML错误中删除不会发生.此外,对于outerHTML,此错误不会显示.

我应该怎么解决这个问题？

Answer 1

看起来您正试图将内容包装在pre元素中？如果是这样，你可以这样做：

var pre = document.createElement('pre');
while(elem.firstChild) pre.appendChild(elem.firstChild);
elem.appendChild(pre);

这样做的额外好处是可以保留任何属性值和事件处理程序。

或者，您可以将 CSS 应用于相关元素：

white-space:pre;
font-family:monospace;

<pre>编辑： CSS 解决方案可能更好 - 我认为在标签内包含 、 块级元素是无效的<p>。