FF 上的位置问题，但不在 Chrome / IE8+ 上答案

【问题标题】：Position issue on FF but not on Chrome / IE8+FF 上的位置问题，但不在 Chrome / IE8+ 上
【发布时间】：2013-11-04 22:24:53
【问题描述】：

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

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

这是它的样子：

这是它在 Firefox 上的外观：

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

任何帮助将不胜感激，谢谢。

【问题讨论】：

【解决方案1】：

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

这是一个 13 岁的 Gecko bug。

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

【讨论】：

【解决方案2】：

我终于在这个问题上发表了言论，并找到了很多类似的答案。这件事是用relative 包裹absolute div。这似乎对每个人都有用（Firefox / Chrome / IE8+）

这里是更新后的 JSFiddle，希望了解它是如何工作的：http://jsfiddle.net/cd74z/6/

【讨论】：