在带有空白的 PRE 中美化突出显示：nowrap 在 IE 中是一行

Question

在 Internet Explorer 中，样式为 white-space:nowrap 的 PRE 会导致 PRE 中的代码在以下情况下位于一行中：我使用 prettify (http://code.google.com/p/google-code -美化/）。

难道
不应该在 PRE 中产生新行吗？我在页面加载后检查了 prettify 生成的 HTML 源，当遇到换行符时它会生成
。

请参阅 http://blog.mikecouturier.com /2009/12/google-street-view-with-google-maps_27.html 为例。

这在 FF 和 Chrome 中都不会发生。

谢谢

编辑：也许这与此有关：将换行符插入预标记（IE、Javascript）

Answer 1

来自Internet Explorer innerHTML Quirk：

HTML的innerHTML属性
元素是众所周知且广泛的
用过的。它能够设置
一个元素的完整内容
go，包括元素之类的。
作为 QuirksMode
测试
已经表明，innerHTML 是最快的
动态改变页面的方法
内容。

但是，innerHTML 有一个问题
Internet Explorer。

HTML 标准要求
内容显示的转换。
各种类型和数量的相邻
空格被折叠成一个
空间。这是一件好事——就像
一个例子，它让我可以添加很多东西
此源文件中的换行符
不用担心奇怪的事情
显示文本中的换行符。

Internet Explorer 应用这些
分配给的转换
内部 HTML 属性。这似乎是一个
好主意：节省一点时间
在显示期间，因为如果
内存中的表示已经是
标准化，那么浏览器不会
必须在需要时进行正常化
显示文本。

也有例外情况
不过，标准化规则。尤其，
这些是 </code> 元素，<br /> <code><pre></code> 元素，并且在 CSS 感知中<br /> 浏览器，具有任何值的元素，但<br /> 对于空白属性来说是正常的。</p></p> <p> <p>Internet Explorer 不尊重<br /> 这些特殊情况。第三个使<br /> 他们的优化是一个坏主意，因为<br /> 空白可能会在运行时改变，<br /> 例如通过 DOM。在任何<br /> 在这种情况下，Internet Explorer 将正常化<br /> 所有分配给innerHTML<br /> 财产。</p><br />

这是另一个 IE 独有的“bug”（即使是他们发明了innerHTML）。在第一个链接中，你有这个问题的解决方案，但正如卢卡斯指出的那样，所有这些似乎都指向谷歌的代码，而你无法控制。

Answer 2

嘿litb，你是对的，在IE6和IE7版本中，pre标签代码显示在1行上。我仅针对 IE6 和 7 浏览器添加了这个小修复。

我已经测试过它，它工作正常，这有点 hacky，因为我实际上用

标签替换
标签，但这并不'不会在 IE6 和 7 浏览器中造成任何视觉差异。

您可以将此代码片段添加到 HTML 页面的任何位置。它使用 jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    // this BR issue seems to happen only in browser
    // msie version 6.0 and 7.0
    if($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")) {

        // replace all <br>s in the .prettyprint section
        // with <p> tags. <p> tags have the same visual behavior as <br> tags
        // in IE 6 and 7
        $(".prettyprint br").each(function(){
            $(this).replaceWith($("<p></p>"));
        });

    }

});
</script>

在谷歌修复 IE6 和 IE6 的美化代码之前，这可能是您最好的选择。 7.