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

Question

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

我的 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>

我的 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% 高度。正文和 html 也是 100% 宽和高。因此每篇文章都是当前浏览器窗口的大小。

请注意，每个article.layer 都设置为position:relative。

最新文章中有两个divs，定位为absolute，因此一个位于左侧，一个位于右侧。

这适用于所有浏览器，Firefox 除外。在 Firefox 中，最后一篇文章的 div.left 和 div.right 显示在顶部并覆盖第一篇文章……

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

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

Answer 1

我自己正在使用 display:table。对于某些显示的布局问题，这是一种解决方法：块无法充分处理。理由很长，我不在这里赘述。

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

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

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

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

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

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

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

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

对此没有优雅的解决方案。它需要对问题进行逐案评估和量身定制的解决方法。 :(

在您的情况下，您不妨将“位置：相对”从“层”类中删除。对 Firefox 来说毫无意义。

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

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

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

Answer 2

如果您将display:table 始终更改为display:block，它的渲染效果很好，如您所见here。您使用display:table 有什么原因吗？