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

Question

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

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

我错过了什么？

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

http://jsfiddle.net/X9NNh/1

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

http://jsfiddle.net/x82uK/

Answer 1

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

尽管在绝对定位图像顶部的链接时这会使您的工作更加困难(阅读:需要 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;
}