環繞浮動元素的文字不能在FF中工作

在IE瀏覽器中它正確，我想要它！在FF這是行爲怪異的...

因爲我是新的，我不允許發佈圖像..只是嘗試代碼，你會看到。在FF中，文本包裝得太快，周圍的div並沒有像你期望的那樣擴大。

我搜索了高和低，並測試自己藍色，但沒有結果。有人知道我可以如何解決這個問題，所以它的行爲應該像FF一樣嗎？我知道我可以通過設置寬度來解決它，但我想要一個動態佈局（如果可能的話......）！代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head> 

    <body> 

     <table style="border:2px solid steelblue;overflow:hidden;"> 
      <tr> 
       <td style="width:100%;"> 
        <div id="page_content" style="float:left;background-color:#ffffff;"> 
         <div style="float:right;border:1px solid red;"> 
          ROTA FLOATED RIGHT 
         </div> 
         <p style="margin:0;border:1px solid green;"> 
          This is just a stupid text to show my point... 
         </p> 
        </div> 
       </td> 
      </tr> 
     </table> 

    </body> 

</html>

謝謝！

編輯1：我發現了一個並不完美的解決方案，但是...在p標籤上使用style =「display：inline」會導致良好的包裝。缺點是p標籤上的邊距被搞砸了。使用填充可以解決這個問題，但海事組織這是一個骯髒的變通方法，甚至帶來了另一個問題（保證金擰），以光......

來源

2012-09-26 mrFrodo

'1.'那是什麼表？我建議不要使用表格進行頁面設計。 '2。你是否有理由嚴格使用XHTML，而不使用HTML5？ '3.'所有的CSS都應該放在樣式表中 - 而不是混合在HTML中。 – ANeves

下面是代碼的小提琴：http://jsfiddle.net/feeela/Bgcxd/（在Chromium和Opera中按預期工作，但不在Firefox中） – feeela

@Anves該表是我在一個真實項目中的總體設計的一部分，其中這個問題源於。沒關係，沒有表的同樣的問題。當然，css應該放在樣式表中，但我只是試圖在這裏顯示我的問題，儘可能簡潔和容易，以查看和重現。 – mrFrodo

-3

試試這個：

<table style="border:2px solid steelblue;overflow:hidden;"> 
     <tr> 
      <td id="page_content" style="background-color:#ffffff;border:1px solid green;"> 
         This is just a stupid text to show my point... 
      </td> 
      <td style="border:1px solid red;"> 
       ROTA FLOATED RIGHT 
      </td> 
     </tr> 
    </table>

來源

2012-09-26 10:35:20 LifeIsShort

模擬Firefox中任何其他瀏覽器的錯誤行爲。但OP希望擺脫這種行爲。 – feeela

@LifeIsShort這會在表格行中創建2列。我想要文本環繞浮動div。浮動p標籤也不是我想要的。使用樣式顯示：在p標籤上內聯是一種解決方案，但它涉及使用填充，我也希望儘可能避免使用填充...待續！ – mrFrodo

試試這個

只要把像這樣在'p'標籤中'float：left'。

<p style="margin: 0px; border: 1px solid green; float: left;"> This is just a stupid text to show my point... </p>

實現此一一併得到結果爲同在所有的瀏覽器

來源

2012-09-26 15:06:13 Prasoft

環繞浮動元素的文字不能在FF中工作

回答

相關問題