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自己。对于某些显示的布局问题，这是一种解决方法：块无法充分处理。理由是冗长的，我不会在这里讨论它。

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

来自“你所知道的关于CSS的一切都是错的”一书由Rachel Andrew＆amp;凯文扬克：

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

位置的影响：相对于table-row-group，   table-header-group，table-footer-group，table-row，table-columngroup，   table-column，table-cell和table-captionelements未定义。

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

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

同样的参考继续提出两点建议：

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

这个没有优雅的解决方案。它需要对问题进行逐案评估，并采用量身定制的解决方法。：（

在你的情况下，你也可以从“Layer”类中取消“position：relative”。这对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？

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

2 个答案: