CSS-Mozilla絕對位置全角問題

Question

小提琴 -

我們已經將一些div顯示為table/table cell 。

單個單元格的50% wide為50% wide ，我們在第一個單元格div中具有absolute定位的元素。 該元素的100% wide為100% wide ，但parent元素的100% wide為50% wide 。

在Chrome上，絕對定位元素的寬度是其父元素的100％，在Mozilla Firefox中，其元素是100％的屏幕 。 你知道為什么嗎？

我的目標是使其距離此父對象100％寬 ，並注意我需要對其進行絕對定位。

Answer 1

redTry給width:inherit了#main 。

#main {
  width: inherit;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0.5;
  bottom: 0;
  z-index: 100;
  background: pink;
}
//below is the hack for chrome.
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .d-td div#main 
    {
        width: 100%;
    }
}

Answer 2

發生這種情況是因為Mozilla不支持position: relative對於任何display: table-cell元素。 從表格單元元素中刪除position: relative ，並在其中創建一個帶有position: relative的<div> 。 所有position: absolute此div中的position: absolute元素將正確放置。