使用 inline-block 设置的 Safari/Chrome 重叠元素

Question

我正在尝试构建一个页面来并排显示两个图像。我希望这些项目以书本格式居中显示在屏幕上，并且随着浏览器大小的调整，图像的高度也会发生变化，因此它们会填满整个窗口。

为了做到这一点，我使用带有文本对齐中心的显示内联块来实现效果。它在 FF 上运行良好，但是当我在 Safari 或 Chrome 中打开调整大小时，div 开始重叠。我创建了这个 jsfiddle 来展示我的 dom 示例。我需要 pageOne 和 pageTwo div 内联块，因为后来我绝对将链接放在页面图像的顶部。

我错过了什么？

要查看该问题，您需要在 safari/chrome 中打开 jsFiddle 并使结果窗格大于默认值。从浏览器开始，大约是其正常宽度/高度的 1/2。运行 jsFiddle 时，放大浏览器并注意两个图像是如何开始重叠的。如果你在 FF 中打开它，它们不会重叠。

http://jsfiddle.net/X9NNh/1

使用表格，我能够在所有浏览器中接近我想要的效果：

http://jsfiddle.net/x82uK/

Answer 1

确实，这很棘手，因为这些内联块容器不会随着内容缩放而调整自身大小以适应其内容。

虽然在图片上绝对定位链接时，这会让你的工作更加困难（阅读：需要 Javascript），here's an alternative approach 使用 background-size: contain。

HTML：

<div id="issue">
  <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
  <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
</div>

CSS：

html, body {
  height: 100%;
  background: #666;
}
#issue {
  position: absolute;
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid grey;
  box-sizing: border-box;
  background: #EEE;
}
.page {
  position: absolute;
  top: 30px; bottom: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}
#leftPage {
  background-position: center right;
  left: 30px; right: 50%;
}
#rightPage {
  background-position: center left;
  left: 50%; right: 30px;
}