IE8 PRE标签问题

IE8 PRE Tag Problems

本文关键字：问题 标签 PRE IE8      更新时间：2023-09-26

我参考了另一个类似的讨论。这是讨论的链接。

pre中的代码在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，此错误不会显示。

我该如何处理这个问题?

看起来你只是想把内容包装在一个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>标签。

其实我自己也找到了答案。当我使用AngularJS时，我使用了错误的指令ng-bind-html-unsafe。我把ng-bind-html-unsafe切换到ng-bind，然后我的问题就解决了!

谢谢大家的帮助!

对不起，我与段落类选择器混淆了，

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

上面的<p>标签既包含类"。前"and"。你是否尝试使用选择器$(".pre. filecontent")，它寻找具有类的元素。fileContent"在带有class的元素内部"。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*/
相关文章：