IE8 PRE标签问题

Question

我参考了另一个相关讨论，这是那个讨论的链接：

code inside pre goes in one line on 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

如果我从elem.innerHTML中删除<pre>，错误就不会发生。此外，在outerHTML中，这个错误也不会出现。

我该如何解决这个问题？

- Abilash

---

大家，这个问题没有答案吗？ - Abilash

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;

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

- Niet the Dark Absol

Answer 2

我实际上已经自己找到了答案。由于我正在使用AngularJS，我使用了错误的指令ng-bind-html-unsafe。我将ng-bind-html-unsafe切换为ng-bind，然后我的问题就解决了！

谢谢大家的帮助！

- Abilash

Answer 3

抱歉，我对段落类选择器感到困惑。

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

上面的<p>标签包含了类“pre”和“filecontent”，您正在使用选择器$（“.pre.fileContent”）尝试查找具有类“pre”的元素内部的类“fileContent”。

我只想确定它是正确的还是误打误撞的。 :)

解决方案：

获取文本区域或源容器中的内容，通过“\n”分割字符串，并使用循环向所有数组元素添加<p>标签。

var textVal = jQuery("#wmd-input").val();
textVal = textVal.split("\n");
var temp = "";
for (var i=0; i < textVal.length; i++) { 
  temp += "<p>" + textVal[i] + "</p>";
}

/* Assing the temp html in your target div or container*/

- Bala Varadarajan