當放置在IE7中的PRE標籤中時，多個BR標籤將摺疊成單個標籤

在IE7中，<pre>標籤中的多個換行符（使用<br />或<br>）將導致IE7將中斷摺疊爲單箇中斷。爲了證明這一點，你可以使用下面的HTML代碼：當放置在IE7中的PRE標籤中時，多個BR標籤將摺疊成單個標籤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
     <style type="text/css"> 
      * 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      .a, .b 
      { 
       float: left; 
      } 
      .b br 
      { 
       display: block; 
      } 
     </style> 
    </head> 
    <body> 
     <pre class="a">Line 1a<br /><br />Line 2a</pre> 
     <pre class="b">Line 1b<br /><br />Line 2b</pre> 
    </body> 
</html>

這將導致：（對於IE7）

Line 1a Line 1b 
Line 2a 
     Line 2b

，並會導致：（對其他瀏覽器：FF等）

Line 1a Line 1b 
     Line 2b 
Line 2a

正如你所看到的，我可以在<br />標籤本身上使用display: block;來解決這個問題。但問題是，那麼它不再適用於其他瀏覽器，因此它只是IE7的一個修補程序，因此無用，因爲IE7並不是真正的主流瀏覽器，將來也不會有用。

雖然這僅僅是一個備註，並代替<pre>標籤，你就能更好地運用CSS代碼在<div>標籤：white-space: pre-wrap;word-wrap: break-word;模擬類似的行爲，這個問題留給答案是如何在跨反正解決這個問題瀏覽器方式沒有CSS黑客或特定的瀏覽器目標CSS代碼。

來源

2012-09-02 Yeti

我認爲你應該使用IE條件註釋。

是的，這是一個特定瀏覽器的目標CSS代碼，但你正在寫正確的HTML評論。如果IE不是一個兼容的瀏覽器，並決定閱讀評論，這是他的問題。而且，如果這能解決你的問題，你還想要什麼？

然後，您可以使用

<!--[if lte IE 7]> 
<style type="text/css"> 
.b br{ 
    display:block; 
} 
</style> 
<![endif]-->

見這裏：http://jsfiddle.net/APj3Y/1/

來源

2012-09-02 19:06:06 Oriol

我不喜歡針對特定的瀏覽器，所以我儘量避免這種情況這是我的實際解決方案。但如果你真的想這樣做，有條件的評論似乎是唯一的選擇。 – Yeti

當放置在IE7中的PRE標籤中時，多個BR標籤將摺疊成單個標籤

回答

相關問題