IE8 PRE標簽問題

Question

我提到了其他類似的討論。 這是該討論的鏈接。

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，不會顯示此錯誤。

我該如何解決？

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> （塊級元素）是無效的。

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*/