Firefox的問題與顯示：在表格單元格

絕對的我有一個td元素中使用絕對定位的內容時，發現了一個問題。 td元素未被識別爲定位元素，因此內容相對於body被定位。此問題僅在FireFox中出現，預期佈局在其他瀏覽器中可見 - jsfiddle。Firefox的問題與顯示：在表格單元格

做它周圍的小挖看來，這個問題是使用display:table-cell作爲默認的顯示類型表格單元格與Firefox瀏覽器。我可以通過將顯示更改爲block或通過添加一個div容器來充當內容的定位容器來解決問題。

是否有任何理由，以避免改變細胞的顯示類型block？我寧願使用此方法，而不是添加其他元素來在一個瀏覽器中更正問題。

如在任一div style absolute in a table cell或Why "display: table-cell" is broken when "position: absolute"描述這是不一樣的問題。

來源

2011-08-31 detaylor

+1我幾天前遇到了同樣的問題，我不得不改變我正在嘗試做的事情。 –

@ric_bfa - 現在我知道是什麼觸發它，這比其他任何事情都更讓人煩惱。我認爲，即使IE7表現得如預期一樣，FireFox也不會這樣，世界即將結束。 – detaylor

同樣在這裏，IE =工作的，其他人的肯定會做得更好，但在這種情況下，是一個很大的驚喜。 –

如果您設置單元格的顯示器block它會被包裹在一個匿名錶格單元格。生成的CSS框樹與在單元格內創建<div>並在該塊上設置所有單元格的樣式和屬性相同。

這可能是很好的許多目的。如果單元格有一個行或一個colspan（因爲它們不代表塊上的任何內容），或者如果該單元格具有您期望參與邊框摺疊的邊框樣式，或者如果您有兩個這樣的單元格相鄰（因爲這兩個塊將被包裝在一個單個表格單元格中，而不是在兩個單獨的表格單元格中）。在其他情況下，行爲可能會出乎意料。但是，如果你對樣式和內容有足夠的控制權，並且不會對單元格做太多樣式，那麼這將起作用。

來源

2011-08-31 16:12:39

謝謝，很好的答案。我注意到，如果其他單元格包裝成兩行，那麼帶有「display：block」的單元格不會像預期的那樣展開，這可以通過您解釋的內容來解釋。 – detaylor

@Boris Zbarsky：問題與rowspan和colspan使用任何修補程序？ – krish

不是我所知道的，它並沒有在你的單元格中放置一個實際的塊，並在其上放置'position：relative'風格。或者Firefox修復這個bug，當然。 –

-2

您是否嘗試將TD的位置明確設置爲相對？

這應該重置定位。實際上，你所得到的是正確的行爲，不應只與TD有關，但你知道，瀏覽器很有趣。

詳情爲什麼你需要明確設置，請查看：
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

更新：

這種回答表明試圖的選項。它被寫入早於接受的答案，並且不僅僅因爲存檔原因而被刪除，並且對於那些從搜索引擎來到這裏的人有另一種相關的可能性，用於稍微相似但不相同的問題。我感謝你的理解。

來源

2011-08-31 12:31:22 Meligy

是的，「td」的位置顯式設置爲「相對」。除FireFox之外的所有瀏覽器都將相對於'td'的內容定位，相對於'body'的FF位置。 'position：table-cell'似乎阻止了'td'作爲一個抵消父項。 – detaylor

我有完全相同的問題。除Firefox以外的所有瀏覽器都將「position：absolute;」與最接近的「位置：相對」相關的內容父對象，但是如果對象具有「display：table-cell;」 firefox忽略它，並設置與body相關的絕對內容。煩人。 –

Firefox的問題與顯示：在表格單元格

回答

相關問題