我遇到了仅在firefox中出现的最奇怪的定位问题.

我的HTML：

@H_404_4@<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>

我的CSS：

@H_404_4@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; }

所以每篇文章都设置为：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.

知道我在这里做错了吗？