使用內聯塊設置的Safari / Chrome重疊元素

Question

我正在嘗試建立一個頁面來同時顯示兩個圖像。 我希望這些項目以書籍格式居中顯示在屏幕上，並且隨着瀏覽器大小的改變，圖像的高度也會發生變化，因此它們會填滿窗口。

為此，我使用以文本對齊的中心顯示內嵌塊來實現效果。 IT在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），但這是使用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;
}