html - CSS - Mozilla 绝对位置全宽问题

Question

小提琴-

我们有一些 div 显示为table/table cell.

单个单元格是50% wide，我们已经absolute在第一个单元格 div 中定位了元素。这个元素是100% wide，但它parent是50% wide。

在 Chrome 上绝对定位元素是其父元素的 100% 宽，而在 Mozilla Firefox 上它是 100% 的屏幕。你知道这是为什么吗？

我的目标是让它100% 宽于这个 parent，并且还要注意我需要它是绝对定位的。

Answer 1

红色尝试给予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元素。从 table-cell 元素中删除position: relative并在其中创建一个<div>with position: relative。此 div 内的所有position: absolute元素都将正确定位。