HTML – 在Firefox中定位问题？ position：相对于display：table元素

我的HTML：

<article id="one" class="layer"></article>
<article id="two" class="layer"></article>
<article id="three" class="layer">
   <div class="left"></div>
   <div class="right"></div>
</article>@H_675_5@ 
 
我的CSS：
 
  
 
html,body {
  margin: 0; padding: 0;
  height: 100%;
  width: 100%;
}

article.layer {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}

article .left,article .right {
  position:absolute;
  width: 50%;
  height: 100%;
  min-height:100%;
  display:table;
}

article .left { left: 0; top: 0; }
article .right { left: 50%; top: 0; }@H_675_5@ 
 
所以每篇文章都设置为：table和100％width和100％height.身体和HTML也是100％宽和高.因此,每篇文章都与当前浏览器窗口的大小完全相同.
 
 
请注意,每个article.layer都设置为position：relative.
 
 
最新文章中有两个div位于绝对位置,因此一个位于左侧,一个位于右侧.
 
 
除了在Firefox中,这在所有浏览器中都能正常工作.在Firefox中,上一篇文章的div.left和div.right显示在顶部,覆盖了第一篇文章……
 
 
这是一个现场演示：http://jsbin.com/ubulot/edit#preview
在Firefox中测试它,你会发现问题.我在Mac上安装了FF 9.0.1.
 
 
知道我在这里做错了吗？