在Firefox中占用额外宽度的内联块（包含图像）

Question

我正在设计一个响应式水平图片库，其屏幕截图（在Firefox中）附于下方：

现在，Chrome中的同一个画廊，

虽然两者看起来几乎相同，但问题是，在firefox中，所有三行的宽度都比实际宽度大得多，如chrome所示。

例如，在Chrome中，第一行的宽度为4222像素，应该是实际的宽度，但在firefox中，同一行的宽度为8708像素，超过两倍！

我认为这与实际图像尺寸有关。

Firefox：

Chrome：

虽然我的画廊布局是由JavaScript控制的，但这里是基本布局：

<div class="gallery-container">
  <div class="gallery-background"></div>
  <div class="gallery-content">
    <div class="gallery-header">
      <div class="gallery-title">Open Source Photography</div>
    </div>
    <div class="gallery-showcase">
      <div class="gallery-scrollable">
        <div class="gallery-row">
          <div class="gallery-image-container">
           <img class="gallery-image" />
          </div> 
          <!--All the images of row 1-->
        </div>
        <br />
        <div class="gallery-row">
          <div class="gallery-image-container">
           <img class="gallery-image" />
          </div> 
          <!--All the images of row 2-->
        </div>
        <br />
        <div class="gallery-row">
          <div class="gallery-image-container">
           <img class="gallery-image" />
          </div> 
          <!--All the images of row 3-->
        </div>
        <br />
      </div>
    </div>
  </div>
  </div>
</div>

这是我的CSS代码：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic);

html {
    min-height: 100%;
    height: 100%;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background-color: #000000;
    font-family: 'Open Sans Light', sans-serif;
}

.gallery-background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: repeat;
    -webkit-transition : opacity 1s;
    -moz-transition : opacity 1s;
    -ms-transition : opacity 1s;
    -o-transition : opacity 1s;
    transition : opacity 1s;
}

.gallery-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
}

.gallery-content .gallery-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    text-align: left;
    height: 20px;
    background-color: #000000;
    z-index: 2;
}

.gallery-content .gallery-header .right {
    float: right;
}

.gallery-content .gallery-header .left {
    float: left;
}

.gallery-content .gallery-header .alignment-selection {

}

.gallery-content .gallery-header .gallery-title {
    font-size: 15px;
    color: #eeeeee
}

.gallery-content .gallery-showcase {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.gallery-content .gallery-showcase .gallery-scrollable {
    height: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 20px;
}

.gallery-content .gallery-showcase .gallery-scrollable .gallery-row {
    display: inline-block;
    height: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    text-align: left;
    padding-right: 20px;
    white-space: nowrap;
}

.gallery-content .gallery-showcase .gallery-scrollable .gallery-row .gallery-image-container {
    display: inline-block;
    position: relative;
    height: 100%;
    margin-right: 15px;
}

.gallery-content .gallery-showcase .gallery-scrollable .gallery-row .gallery-image-container .gallery-image {
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    position: relative;
}

PS：请忽略不同的背景，它们会定期更改，并且会产生一种视差效果。谢谢！

更新：

我尝试将每个图像包装在一个容器中。

我已经用新的代码更新了HTML和CSS代码。

尽管firefox采取的额外宽度已经消失，但现在我遇到的问题是具有内联块显示的图像容器没有根据图像的宽度收缩（我有点重新设计了标题并更改了背景）：

经过大量搜索后，我找到了this回答。引用答案：

  

检查并确保其容器/父元素没有空格：nowrap。这会导致他们不能包裹。

但如果删除白色空间：nowrap，水平滚动会中断，图像会移动到下一行。

任何人都可以向我提供一些关于我做错的简短提示吗？

Answer 1

我通过添加属性来修复它：

max-height: 100%;

到.gallery-row