Firefox 中的定位问题？位置：相对于显示：表格元素

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

My 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>

My 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; }

所以每篇文章都设置为display:table以及 100% 宽度和 100% 高度。 body 和 html 的宽度和高度也是 100%。因此，每篇文章的大小恰好是当前浏览器窗口的大小。

请注意，每个article.layer被设定为position:relative.

最新文章有两篇divs 位于其中absolute所以一个位于左侧，一个位于右侧。

这在除 Firefox 之外的所有浏览器中都可以正常工作。在火狐浏览器中div.left and div.right上一篇文章的内容显示在顶部并覆盖第一篇文章......

这是一个现场演示：http://jsbin.com/ubulot/edit#preview在 Firefox 中测试一下，您就会发现问题所在。我的 Mac 上安装了 FF 9.0.1。

知道我在这里做错了什么吗？

我自己正在使用 display:table 。这是针对 display: block 无法充分处理的某些布局问题的解决方法。理由很长，我在这里不再赘述。

这是当前 HTML 4/5 规范未定义与“display: table{-x};”相关的某些行为的结果。和定位。

来自 Rachel Andrew 和 Kevin Yank 的《你所知道的关于 CSS 的一切都是错误的》一书：

处理块元素内的定位时的常见做法 就是通过设置position来创建一个新的定位上下文 块元素的属性为relative。这使我们能够定位 块内的元素，相对于其顶部、右侧、底部或 左边。但是，设置position时：relative;在一个元素上 还指定了表格相关的显示值，定位为 被忽略。 Alastair 之前已记录过此行为 Campbell 在他的文章中指出 CSS 2.1 规范不是 明确当元素显示为表格时浏览器应该做什么 元素相对定位：

position:relative对table-row-group的影响， 表头组、表页脚组、表行、表列组、 table-column、table-cell 和 table-captionelements 未定义。

在我看来，这种行为是使用 CSS 表的最大问题 用于布局...

显然，Mozilla 简单地忽略了任何使用 CSS 表格元素建立定位上下文的尝试。

同一参考文献继续提出两个建议：

使用CSS表格没有直接的方法来解决这个问题，但是我们可以采用两种简单方法之一来提供定位上下文：向单元格添加一个定位的子块元素，或者将表格包装在一个定位的元素中。

对于这个问题没有优雅的解决方案。它需要对问题进行个案评估并制定量身定制的解决方法。 :(

在您的情况下，您不妨从“Layer”类中删除“position：relative”。这对于 Firefox 来说毫无意义。

由于您已将“Layer”类创建为表格，因此只需将最后一个实例中的每个 s 创建为“display: table-cell;”即可。

所以你的 CSS 可以这样完成：

.Layer:last-of-type > div
{
display: table-cell;
/* Other formatting here. */
}