渲染事業部在Firefox問題

我想呈現像這樣在Firefox渲染事業部在Firefox問題

<div style="float:left"> Row1,Column1 </div> 
<div> 
    Row 1,Column2 
    <div> Content 1 n Row1,Column2 </div> 
    <div> Content 2 in Row1,Column2 </div> 
</div>

在IE中它工作正常，但在Firefox中會發生什麼是ROW1，列2犯規堆一個在另一個之下。

[Row1，Column2中的內容2]低於內容[Row1，Column1]。

有人可以幫我解決這個問題。

我不想使用表格。不能使用它們。

感謝，本

[更新]這就是我想要呈現的div的它應該是這樣實現後即什麼。

[Row1,Column1] [Content 1 n Row1,Column2] 
       [Content 2 in Row1,Column2]

在IE瀏覽它的工作原理，但在Firefox它呈現這樣

[Row1,Column1] [Content 1 n Row1,Column2] 
       [Content 2 in Row1,Column2 dsfdsf sdfdsf

fsdfdsfdffsf]

這是問題

我不能在這裏複製的CSS，但是這是它歸結爲最後

來源

2009-06-04 Ben

你能發佈一些用HTML CSS ytour好嗎？ – nialljsmith 2009-06-04 16:55:47

你可以發佈一些代碼和/或圖表，顯示你想要完成的事情以及它在Firefox中如何破解？在大多數情況下，錯誤實際上是與IE瀏覽器，因爲渲染不符合... – GalacticCowboy 2009-06-04 16:57:15

嗯..我希望你知道你得到的倒退。請張貼一些CSS？ – JasonV 2009-06-04 16:57:33

浮法離開你的第二列，並給它一個左邊距。

<div style="float:left"> Row1,Column1 </div> 
<div style="float:left;margin-left:100px;"> 
    Row 1,Column2 
    <div> Content 1 n Row1,Column2 </div> 
    <div> Content 1 in Row1,Column2 </div> 
</div>

來源

2009-06-04 17:12:41 Emily

你可以渲染像

<div style="clear:both"> Row1,Column1 </div> 
<div> Row 1,Column2 
    <div> Content 1 n Row1,Column2 </div> 
    <div> Content 1 in Row1,Column2 </div> 
</div>

來源

2009-06-04 16:57:45

這是浮動應該工作的方式，IE做錯了。解決這個問題的最簡單方法是將所有這些元素包裹在另一個div中，然後將「浮動」元素的高度設置爲100%。

編輯：固定http://jsbin.com/upane

<div> 
    <div style="float:left; height:100%">Row1,Column1 </div> 
    <div style="float:left"> 
    Row 1,Column2 
    <div> Content 1 n Row1,Column2 </div> 
    <div> Content 1 in Row1,Column2 </div> 
    </div> 
</div>

這是假設你想要的東西是這樣的：

|--------|-----------| 
|  |-----------| 
|  |-----------|

來源

2009-06-04 16:58:20 tj111

你所試圖做的是行不通的。

如果你根本不能使用表格元素，那麼你將需要使用修復高度和寬度爲你的「單元格」，或者你的Web應用程序中的行和列將永遠不會排隊。

If you want TABULAR data with columns and rows, use tables. That's what they are for。（從alistapart的文章應該是權威的你，做一個搜索「你是說，HTML表是死了嗎？」）

來源

2009-06-04 16:58:22 cgp

<div style="width: 100%; overflow: hidden;"> 
    <div style="float: left;">Row1, Column1</div> 
    <div style="float: right;"> 
     Row1, Column2 
     <div>Content 1 in Row1,Column2</div> 
     <div>Content 1 in Row1,Column2</div> 
    </div> 
</div>

來源

2009-06-04 16:59:56

The problem and the solution http://img190.imageshack.us/img190/7959/whatshappening.png

因此產生的代碼

<html> 
<head> 
</head> 
<body> 
    <div style="float:left; background: red;"> 
     Row 1 column 1 
    </div> 
    <div style="background: blue;margin-left: 200px;"> 
     <p>Row 1 column 2</p> 
     <p>fdsfsfsdfsdfsdfsdfs</p> 
    </div> 
</body> 
</html>

來源

2009-06-04 18:34:43 Sekhat

渲染事業部在Firefox問題

回答

相關問題