prettify突出顯示PRE與白空間：nowrap是IE中的一行

在Internet Explorer中，PRE樣式爲white-space:nowrap導致PRE中的代碼在使用美化（http://code.google.com/p/google-code-prettify/）時位於一行中，。prettify突出顯示PRE與白空間：nowrap是IE中的一行

<br/>是不是應該在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)

來源

2009-12-28 Mike Gleason jr Couturier

奇怪的是...你的示例鏈接不起作用，除非用下劃線替換％5F，即使它是相同的。 – glomad 2009-12-28 18:28:07

這很奇怪..當我編輯帖子，下劃線仍然存在.. – 2009-12-28 20:28:24

這很奇怪。我希望我能回答你的問題，我花了一段時間在調試器中看着它。在我看來，prettyPrint（）運行後，前塊中有** no ** br標籤。你確定他們在IE嗎？ – glomad 2009-12-29 03:37:09

他們美化代碼The Internet Explorer innerHTML Quirk：

HTML 元素的innerHTML屬性是衆所周知並廣使用了。它能夠將中元素的完整內容設置爲一個，包括元素等。由於QuirksMode tests 已經顯示，innerHTML是最快的方式來動態地改變頁面的內容。

但是，innerHTML在 Internet Explorer中存在問題。

HTML標準要求在顯示內容時進行變換。所有類型和數量的相鄰空白都被摺疊爲一個單獨的空間。這是一件好事 - 就像的一個例子，它允許我在這個源文件中添加很多換行符，而不必擔心在顯示的文本中出現奇怪的換行符。

Internet Explorer將這些轉換應用於 innerHTML屬性。這似乎是一個好主意：它顯示過程中節省一點時間，因爲如果內存中表示已經標準化，然後在瀏覽器沒有有正常化時，它需要顯示的文本。但是，規範化規則也有例外。值得注意的是，這些元素是<textarea>元素，元素<pre>元素，並且在CSS-aware 瀏覽器中，具有任何值的元素，但對於空白屬性是正常的。

Internet Explorer不尊重這些特殊情況。第三個使得他們的優化是一個壞主意，因爲空白可能在運行時更改，例如通過DOM更改爲。在任何的情況下，Internet Explorer將規範歸屬於innerHTML 屬性的所有分配。

這是另一個IE只有「bug」（即使是他們發明了innerHTML）。在第一個鏈接中，你有解決這個問題的方法，但是正如盧卡斯指出的，所有這些都指向你無法控制的谷歌代碼。

來源

2010-07-09 14:08:35 AlexV

嘿litb，你說的沒錯，在版本的IE6和IE7的標籤pre代碼顯示在1線。我已經爲瀏覽器IE6和7添加了這個小修補程序。

我已經測試過它，它工作正常，這有點hacky，因爲我實際上用<p>標籤代替<br>標籤，但這不會在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-07 16:00:14

我會在家嘗試一次，謝謝 – 2010-07-09 14:22:10

+1，我和社區一起回答了.. – 2010-07-12 19:35:52

prettify突出顯示PRE與白空間：nowrap是IE中的一行

回答

相關問題