IE8 PRE 标签问题答案

【问题标题】：IE8 PRE Tag ProblemsIE8 PRE 标签问题
【发布时间】：2013-01-21 03:47:21
【问题描述】：

我提到了其他类似的讨论。这是该讨论的链接。

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，不会出现此错误。

我应该如何解决这个问题？

【问题讨论】：

各位，这个没有答案吗？

标签： javascript jquery html internet-explorer-8 angularjs

【解决方案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> 无效。

【讨论】：

【解决方案2】：

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

感谢大家帮助我！

【讨论】：

【解决方案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”的元素。

我只是想确定它是正确还是错误输入。 :)

解决方案：

获取文本区域或源容器内的内容，用“\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*/

【讨论】：