Div 不缩放到子图像的缩放宽度（Firefox 问题）

Question

我在水平滚动的 Div 中有一些图像，如下所示：

HTML

<div id="sg-container" >
    <div id="sg-scroll">
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic" ></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>                
   </div>
</div>

CSS

#sg-container{
   margin:0px;
   width:100%;
   left:0;
   top:0;
   bottom:50px;
   position:fixed;
   overflow-x:auto;
   overflow-y:hidden;
}

#sg-scroll{
   height:100%;
   width:100%; 
   overflow:auto;
   white-space:nowrap;
   font-size:0;
}

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline-block;
}

.sg-pic{
   height:100%;
   width:auto;
}

一个工作示例：fiddle

任何使用 Firefox 的人都可以告诉我为什么图像包装器不缩放它们的宽度以匹配图像。它目前在 Safari 和 Chrome 中运行良好（未在 IE 中测试）。

在 Firefox 中，例如，如果图像最初是 500 像素宽，但由于 100% 高度属性而被放大，则图像包装宽度保持在 500 像素。

另一个例子，如果一个图像最初是 2500 像素宽，但被缩小以适应，图像包装的宽度将保持 2500 像素宽，从而导致下一张图像之前的空间很大。

如何使它在 Firefox 中的行为与在 Chrome 和 Safari 中的行为相同？

Answer 1

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline;
}

将显示更改为内联。