CSS - Mozilla 绝对位置全宽问题答案

【问题标题】：CSS - Mozilla absolute position full width issueCSS - Mozilla 绝对位置全宽问题
【发布时间】：2014-01-18 19:51:23
【问题描述】：

Fiddle -

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

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

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

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

【问题讨论】：

标签： html css mozilla

【解决方案1】：

red 尝试为#main 提供width:inherit。

#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%;
    }
}

【讨论】：

【解决方案2】：

发生这种情况是因为 Mozilla 不支持任何 display: table-cell 元素的 position: relative。从 table-cell 元素中删除 position: relative 并在其中创建一个 <div> 和 position: relative。此 div 内的所有 position: absolute 元素都将正确定位。

【讨论】：