Firefox表格-单元格和全宽度绝对定位子

Question

在Firefox中测试布局时，我偶然发现了一些意想不到的行为。当父对象被设置为显示:表单元格和位置: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上则不然。问题是，为什么会发生这种情况？有什么解决办法吗?还是我应该采取完全不同的方法？

提前谢谢你，

Answer 1

这是壁虎已知的虫子。见壁虎笔记 here - 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;
 }