Firefox 表格单元格和全宽绝对定位的子项答案

【问题标题】：Firefox table-cell and full width absolutely positioned childrenFirefox 表格单元格和全宽绝对定位的子项
【发布时间】：2013-11-13 20:10:49
【问题描述】：

我在 Firefox 中测试布局时偶然发现了一些意外行为。似乎当父级设置为 display:table-cell 和 position:relative 时，其子级在绝对定位并给定 100% 宽度时不尊重父级宽度。相反，子宽度设置为父的父宽度。我用小提琴重新创建了这个问题：

http://jsfiddle.net/D6Rch/1/

结构如下：

<div class="table">
  <div class="cell-1">
    <div class="content-1">this must be positioned absolutely</div>
    <div class="content-2">as these divs will be overlapping</div>
  </div>
  <div class="cell-2">
    <div class="advert">fixed width advert</div>
  </div>
</div>

.table { 
  width:600px;
  height:400px;
  border:3px solid black;
  display: table;
  position: relative;
  table-layout: fixed;
}

.cell-1 {
  width: auto;
  display: table-cell;
  background: yellow;
  position: relative;
  margin-right:10px;
}

.cell-2 {
  margin-right:10px;
  width: 100px;
  display: table-cell;
  background: pink;
  position: relative;
}

.content-1 {
  position: absolute;
  top: 10px;
  width: 100%;
  background: lightgreen;
  z-index: 5;
}

.content-2 {
  position: absolute;
  top: 50px;
  width: 100%;
  background: lightblue;
  z-index: 5;
}

.advert {
  position: relative;
  border: 1px solid red;
}

它在 Chrome 和 Safari 中按预期运行，但在 Firefox 中不正常。问题是，为什么会发生这种情况？是否有解决方法或者我应该采取完全不同的方法？

提前致谢，

【问题讨论】：

你说它们是绝对的，但我看到的单元格是 position: relative... 应该是这样吗？
单元格内的内容是绝对的。内容 div 是子元素，单元格 div（在本例中为 .cell-1）是父元素。

标签： css google-chrome firefox css-position

【解决方案1】：

这是 Gecko 中的一个已知错误。在此处查看 Gecko 笔记 - https://developer.mozilla.org/en-US/docs/Web/CSS/position

因此，您必须将内容 div 包装在另一个定位的 div 中。像这样 http://jsfiddle.net/D6Rch/4/

<div class="cell-1">
    <div class="wrapper">
      <div class="content-1">this must be positioned absolutely</div>
      <div class="content-2">as these divs will be overlapping</div>
    </div>
</div>

.wrapper {
  position: relative;
 }

【讨论】：