css - Firefox 中的定位问题？位置 :relative for a display:table element

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。

最新文章中有两个 div 位于 absolute 位置，因此一个位于左侧，一个位于右侧。

除了 Firefox 之外，这在所有浏览器中都可以正常工作。在 Firefox 中，最后一篇文章的 div.left 和 div.right 显示在顶部并覆盖第一篇文章......

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

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

Answer 1

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

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

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

A common practice when dealing with positioning within a block element is to create a new positioning context by setting the position property of the block element to relative. This allows us to position elements within the block, relative to its top, right, bottom, or left. However, when setting position: relative; on an element that also has a table-related display value specified, the positioning is ignored. This behavior has previously been documented by Alastair Campbell, who points out in his article that the CSS 2.1 spec is not clear on what browsers should do when an element displaying as a table element is relatively positioned:

The effect of position: relative on table-row-group, table-header-group, table-footer-group, table-row, table-columngroup, table-column, table-cell, and table-captionelements is undefined.

This behavior is, in my opinion, the biggest problem with using CSS tables for layout...

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

同一引用资料继续提供两个建议:

There’s no straightforward approach to fixing this problem using CSS tables, but we can take one of two simple approaches to provide a positioning context: add a positioned child block element to the cell, or wrap the table in a positioned element.

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

在您的情况下，您不妨将“position:relative”从“图层”类中删除。这对 Firefox 毫无意义。

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

因此您的 CSS 可以这样完成:

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