1

所以，我有一个包含在 div ( .indexWrap) 中的图像： 

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

其中有 8 个在页面加载时通过 php 在名为 的 div 中创建#slider。我正在使用平滑的 Div Scroll在主页上显示这些图像。在 Chrome 中一切看起来都很好，在 IE 8 和 9 中看起来还不错。问题出在 Firefox 中。每个图像的自动宽度div.indexWrap设置不正确。div 似乎向右延伸了额外的 200-300 像素。这是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都没有正确填充，但是随着滚动开始，下一个检索到的元素被正确填充，有点蹩脚。可能是这一切的原因。

4

3 回答 3

4

尝试添加display: inline-block;

于 2012-10-26T19:15:14.313 回答
0

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

于 2012-07-24T09:11:03.677 回答
-3

只需删除...

宽度：自动；

//blah blah blah 来满足 SO 的最大字符要求，我不敢相信它真的需要这么长

于 2012-07-18T04:26:10.470 回答