在表格單元格後的位置在Firefox中不起作用？

下面的代碼應該創建一個跨越其父元素寬度的100％的僞元素。然而，這在Firefox中不起作用，它可以在Chrome中使用。 Firefox似乎忽略了.parent的position:relative。這是一個錯誤？在表格單元格後的位置在Firefox中不起作用？

HTML

<div class="parent"> 

</div>

CSS

.parent{ 
    background:red; 
    width:100px; 
    height:100px; 
    position:relative; 
    display:table-cell; 
} 

.parent:after{ 
left:0; 
    content:''; 
    right:0; 
    top:10px; 
    height:20px; 
    background:green; 
    position:absolute; 
}

Live demo

看到這個圖像鉻 enter image description here

現在在看到這個結果的Firefox

enter image description here

來源

2012-07-31 Rohit Azad

有什麼效果？是否有內容：之後還是僅僅是一個酒吧？ – SpaceBeers 2012-07-31 08:47:36

你可以添加一些上下文嗎？如何顯示周圍的元素以及是否使用包裝是非常重要的。否則，這似乎是Firefox中的一個錯誤，即使是好的舊IE也能正確顯示':: after'元素。 – Zeta 2012-07-31 08:50:43

有人應該將此作爲一個錯誤提交給Mozilla，但它仍然與Firefox 25相關。 – mystrdat 2013-10-30 12:24:39

如果可能的話，display:table-cell更改爲block或inline-block修復此錯誤。或者，將父母上的position:relative更改爲absolute。

來源

2012-07-31 08:38:45 Christoph

不，這是不可能的，因爲我用來並排拖動div 。我使用表格單元爲平等的高度目的，所以我不能刪除表格單元我的div – 2012-07-31 08:39:57

@RohitAzad改變位置爲絕對？ – Christoph 2012-07-31 08:42:31

'position：absolute'？這將導致所有在'top：0; left：0;'位置渲染的塊相對於下一個具有非靜態位置值的父項。它不會工作。 – Zeta 2012-07-31 08:43:22

給width

.parent:after{ 
     left:0; 
     content:''; 
     right:0; 
     top:10px; 
     width:100px; 
     height:20px; 
     background:green; 
     position:absolute; 
}

來源

2012-07-31 09:04:16 Prashobh

在表格單元格後的位置在Firefox中不起作用？

回答

相關問題