css - Firefox のテーブルセルと全幅の絶対配置の子

Question

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 では機能しません。質問は、なぜこれが起こるのですか？これに対する回避策はありますか、それともまったく別のアプローチを取る必要がありますか?

前もって感謝します、