CSS定位在表格單元格內絕對不在Firefox中工作

我無法弄清楚Firefox中的這個定位問題。它似乎沒有遵循絕對定位規則。有沒有我做的事情不應該做，但有些眉毛處理它，有些則不？CSS定位在表格單元格內絕對不在Firefox中工作

JS小提琴：

在IE，Chrome瀏覽器，Safari，Opera或

下面是實際的代碼。如果我沒有遵循某種我不瞭解的標準，請告訴我。

HTML：

<table> 
    <tr> 
     <td> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </td> 
    <tr> 
    <tr> 
     <td> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </td> 
    <tr> 
</table>

CSS：

#two { 
    position: absolute; 
    top: 0; 
} 
td { 
    position: relative; 
}

我唯一的線索是，有，我應該分配給td會導致它的工作其他值。一些其他的stackoverflow問題已經提到了Firefox對此的不當行爲，但我一直沒有找到答案。我試着分配top和left的零值，但是FF不會讓步。

來源

2012-06-13 EGHDK

這是在FF 12.0中爲我工作。「兩」重疊「三」 - 但它仍然是錯誤的，請參閱我的回答 –

每個「兩」應該重疊它自己的「三」我不知道，如果你只是看到兩個「兩」重疊相同的三個 – EGHDK

這已被記錄爲14年前的錯誤！ https://bugzilla.mozilla.org/show_bug.cgi?id=35168閱讀這篇有用的文章http://davidwalsh.name/table-cell-position-absolute –

更改ID的上課，也顯示其作爲塊修復它：

http://jsfiddle.net/GchWZ/

這是更好，更「適當」到用戶的內部DIV雖然從這個堆棧溢出後引：Does Firefox support position: relative on table elements?

<td> 
    <div style="position:relative"> 
     This will be positioned normally 
     <div style="position:absolute; top:5px; left:5px;"> 
      This will be positioned at 5,5 relative to the cell 
     </div> 
    </div> 
</td>

來源

2012-06-13 18:49:33 Phu

工作正常！太好了，你現在怎麼知道要這樣做？是我應該閱讀的東西（我真的不知道如何正確使用'display'），或者它只是Firefox的一個「修復」，或者在將來每當這樣做時它應該是一個標準的操作過程？ – EGHDK

我記得很久以前讀過一些關於firefox如何處理td的問題。我會盡力找到這篇文章。 – Phu

是的，'display：block'是一個臨時解決方案，因爲現在我試圖擴展它多一點，並且需要'display：block-inline'，它也在Firefox中打破了，但仍然適用於其他任何瀏覽器。 – EGHDK

您正在使用的ID

ID都是唯一的。如果要重用樣式分配，請使用類。

來源

2012-06-13 18:45:54

更新了我的JS小提琴*參見上面的*，它仍然不起作用 – EGHDK

由勃蘭特指出重複 ID問題

除此之外，分配positioning to table cells is dodgy at best - 我很驚訝，它可以在任何瀏覽器。如果你必須使用一個表，換到位置，你想要的元素在一個div並指定包裝DIV position: relative：

<table> 
    <tr> 
     <td> 
     <div class="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
     </td> 
    <tr> 
</table>

CSS

#two { 
    position: absolute; 
    top: 0; 
} 
.wrapper { 
    position: relative; 
}

來源

2012-06-13 18:51:04 steveax

試試這個：

<tr> 
    <td> 
     <div id="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div id="wrapper"> 
      <div id="three">Three</div> 
      <div id="two">Two</div> 
     </div> 
    </td> 
</tr>

和對於css：

#two { 
    position: absolute; 
    top: 0px; 
} 

#wrapper { 
    position: relative; 
}

來源

2012-06-13 18:58:55 ppsreejith

問題來自FF呈現表格的方式。如果你將你的TD設置爲display:inline-block;它應該顯示正確。

來源

2012-06-13 19:01:08 hradac

-1

有合法的理由使用CSS顯示：表格樣式。它消除了顯示的問題：塊和顯示：內聯塊不尋址。這些原因佔據了CSS樣式的一整本書，所以我不會在這裏討論它們。同一本書還介紹了使用該顯示類型定位項目的問題。 CSS 2.1規範根本沒有解決這個問題，Mozilla選擇了一門忽略嘗試創建這些元素的定位上下文的課程。 CSS表格定位是完善的，成熟的方法，而不是「狡猾」 - 它只是需要了解其極限 - 就像任何其他CSS元素一樣。對於元素大小可變或未知的液體佈局和其他佈局，對於垂直間距和定位是不可或缺的。

已經提出了這個線程中的一個建議 - 在「table-cell」元素集中創建一個div來定位：relative並將其用於定位上下文。另一種方法是在該單元格中嵌入另一個CSS表格，並使用它來在網格中定位元素。第三種方法是將CSS表格封裝在另一個創建定位上下文的項目中。

來源

2012-07-05 23:16:46

我有點晚回到這個問題，但我發現自己對投票表決感到驚訝。爲什麼？我在這裏給出了一個相當詳細的回覆：http://stackoverflow.com/questions/8951993/positioning-problems-in-firefox-positionrelative-for-a-displaytable-element/11353364#11353364 ..並收到一個重大的投票和「答覆」我的答覆。我使用CSS Tables來進行水平菜單定位，並且解決了「Stick Footers」問題而無需求助絕對尺寸（噢，用戶先生？您需要讓您的顯示器成爲這個尺寸以使其看起來正確...）或JavaScript。 –

如果你想定位一個單元格的頂部和底部的東西，同樣在Firefox中，我做了以下CSS和（不幸）jQuery混合的工作。

在您的td中使用包含div（div.inner）的td中的位置=相對樣式。在包裝的內部，我添加了2個div，它們位於單元的頂部和底部。
定位在頂部（class = interval-start）是免費的，通過CSS定位。
將div.interval-end定位在底部是通過腳本完成的，該腳本添加了圖片中顯示的樣式。使用變量td-heights和默認情況下包裝div爲0-height，你需要一種方法來告訴元素應該走多遠到底部。該腳本如下：
```
 $("table .inner .interval-end").each(function() { 
      $(this).css({top: ($(this).parent().parent().height() - 10) + "px"}) 
     }).show() 
```
我最初提出的div.interval端看不見的，設置「頂」樣式，然後使其可見通過jQuery顯示（）。

希望這可以幫助任何人試圖達到相同的目的。讓我知道是否有更好的方法，特別是如果這些方法不需要腳本。順便說一句：我試圖設置包裝div.inner的高度風格，但它與Firefox中的表格佈局混淆。

來源

2013-11-19 13:04:59 Cor

CSS定位在表格單元格內絕對不在Firefox中工作

回答

相關問題