4

在 Internet Explorer中，当我使用 prettify ( http://code.google.com/p/google-code-prettify/ )时PRE， a 样式white-space:nowrap会导致 中的代码在PRE一行中。

a 不<br/>应该在 a 中引起新的一行PRE吗？我在页面加载后检查了 prettify 生成的 HTML 源代码，它<br/>在遇到换行符时生成。

有关示例，请参见http://blog.mikecouturier.com/2009/12/google-street-view-with-google-maps_27.html 。

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

谢谢

编辑：也许这与此有关：Inserting a newline into a pre tag (IE, Javascript)

4

2 回答 2

4

来自Internet Explorer innerHTML Quirk：

HTML 元素的 innerHTML 属性众所周知并被广泛使用。可以一次性设置一个元素的完整内容，包括元素等。正如QuirksMode 测试 所示，innerHTML 是动态更改页面内容的最快方法。

但是，innerHTML 在 Internet Explorer 中存在问题。

HTML 标准要求对内容的显示进行转换。所有种类和数量的相邻空格都被折叠成一个空格。这是一件好事 - 仅作为示例，它允许我在此源文件中添加大量换行符，而不必担心显示文本中出现奇怪的换行符。

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

不过，规范化规则也有例外。值得注意的是，这些是<textarea>元素，<pre>元素，以及在 CSS 感知浏览器中，具有任何值但对于 white-space 属性正常的元素。

Internet Explorer 不考虑这些特殊情况。第三个使他们的优化成为一个坏主意，因为空白可能会在运行时发生变化，例如通过 DOM。在任何情况下，Internet Explorer 都会规范化所有对 innerHTML 属性的分配。

这是另一个 IE 唯一的“错误”（即使是他们发明了 innerHTML）。在第一个链接中，您有解决此问题的方法，但正如卢卡斯指出的那样，所有似乎都指向您无法控制的 Google 代码。

于 2010-07-09T14:08:35.593 回答
2

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

我已经对其进行了测试，它运行良好，它有点 hacky，因为我实际上是用<br>标签替换<p>标签，但这不会在 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 和 7 的美化代码。

于 2010-07-07T16:00:14.037 回答