Question

所以，我有一个用div（.indexWrap）包裹的图像：

<div id = "slider">      
<div class="indexWrap">                 
        <img class="indexImage" src="">                             
       </div>
</div>

在名为#slider的div中，通过php在页面加载中创建了8个。我正在使用smooth Div Scroll在主页上显示这些图像。 Chrome中的一切看起来都不错，在IE 8和9中看起来还不错。问题出现在firefox中。每张图片的自动宽度div.indexWrap未正确设置。 div似乎向右延伸了200-300px。这是css：

#slider{
    position: relative;
    top:50px;
    width:100%;
    height:275px;
}
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}
.indexWrap{
    float:left; 
    position:relative;
    width:auto;
    height:100%;

    padding-right:50px;
    padding-left:50px;
}
img.indexImage{
    float:left;
    position:relative;
    width:auto;
    height:100%;
}

以下是指向问题的实时版本的链接：jasone.co

编辑：在页面加载的基础上，每个div.indexWrap都没有正确填充，但随着滚动开始，下一个检索到的元素被正确填充了一些跛脚。可能是这一切的原因。

Answer 1

尝试添加display: inline-block;

Answer 2

我通过摆脱图像周围的包装来解决问题。不是一个想要它，但它工作正常。

Answer 3

只需删除...

宽度：自动;

//等等等等，以填补SO的最大字符要求，我无法相信这真的需要这么久

width：firefox中的auto无法按预期工作

3 个答案: