MCS*_*MCS 11 html javascript css internet-explorer
我正在使用Prototype的PeriodicalUpdater来更新带有ajax调用结果的div.据我了解,div通过设置innerHTML来更新.
div包含在<pre>标签中.在Firefox中,<pre>格式化按预期工作,但在IE中,文本都以一行结尾.
这里有一些示例代码,用于说明问题.在Firefox中,abc是在不同的行上def; 在IE中,它在同一条线上.
<html>
<head>
<title>IE preformatted text sucks</title>
</head>
<body>
<pre id="test">
a b c
d e f
</pre>
<script type="text/javascript"><!--
var textContent = document.getElementById("test").innerText;
textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
document.getElementById("test").style.whiteSpace = "pre";
document.getElementById("test").innerHTML = textContent;
--></script>
</body>
</html>
有人知道解决这个问题的方法吗？
End*_*ssa 17
设置innerHTML会激活一个HTML解析器,它会忽略多余的空格,包括硬回车.如果您更改方法以在字符串中包含<pre>标记,则它可以正常工作,因为HTML解析器保留了硬返回.
运行示例页后,您可以通过执行View Generated Source来查看此操作:
<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>
您可以在此处看到,硬回车不再是<pre>标签内容的一部分.
小智 6
或者你可以
if (el.innerText) {
el.innerText = val;
} else {
el.innerHTML = val;
}
通常,通过使用DOM方法构建动态内容,您将获得更一致的结果,尤其是当您关心像空格规范化这样的微妙事物时.但是,如果您为此设置了使用innerHTML,则有一个IE解决方法,即使用该outerHTML属性,并包含封闭标记.
if(test.outerHTML)
test.outerHTML = '<pre id="test">'+textContent+'</pre>';
else
test.innerHTML = textContent;
可以在此处找到此解决方法和更多讨论:将换行符插入到预标记中(IE,Javascript)