在FF上定位问题但在Chrome / IE8 +上没有

Question

我已经被困了几天了。在我正在处理的网站中，内容必须是一本有2页的开放式书籍。由于页面必须具有相同的高度，无论其内容如何，​​我都使用了display: table/ table-cell。那部分效果很好。

这是装饰伤害。在每个页面的顶部必须有一个带背景图像的div。我用position: absolute div这样做了。这适用于Chrome / IE8 +，但在Firefox中根本不适用，我想这是因为表格单元格/绝对混合，但我无法让它工作。

以下是它的假设：

以下是Firefox的外观：

最后，这是我的html / css结构的jsfiddle：http://jsfiddle.net/cd74z/4/

感谢任何帮助。谢谢。

Answer 1

每当涉及表格或display: table-cell时，Firefox都会遇到绝对定位问题，它会忽略表格单元格作为相对父级。

这是一个13岁的Gecko bug。

你可以通过恢复表格结构并在你的单元格上使用display: inline-block，或者像你一样在你的绝对div周围放置另一个相对div来解决这个问题。

Answer 2

我终于在这个问题上说了几句话，并找到了很多相似的答案。这件事是用absolute div包裹relative div。这似乎为每个人做了一些技巧（Firefox / Chrome / IE8 +）

以下是希望了解其工作原理的更新JSFiddle：http://jsfiddle.net/cd74z/6/