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

如果我从<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;

编辑：CSS解决方案可能更好 - 我认为在<pre>标记内<p>（块级元素）是不合法的。

Answer 2

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

感谢大家帮助我！

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”）来查找具有类“.fileContent”的元素在类“.pre”。

的元素中

我只是想确定它是正确还是错误输入。：）

<强>解决方案：

获取文本区域或源容器内的内容，将字符串拆分为“\ 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*/

IE8 PRE标记问题

3 个答案: