2

我有一排向左浮动的图像，我将图像的大小调整为height:160px并添加了所有图像的宽度。然后给父div一个宽度。（在我的项目中，我使用的是 iScroll，所以这就是我这样做的原因）。

img {
    height: 160px;
    vertical-align: top;
    float: left;
    display:block;
}

javascript:

var scrollerWidth = 0;
$('.scroller').find('img').each(function(){
    scrollerWidth += this.width;
});

$('.scroller').css('width', scrollerWidth);

在 Chrome 和 Safari 中一切正常，但在 Firefox 中不行。在 FF 中，最后一个图像将进入第二行。然而，总宽度与 Chrome 中的相同。你可以看到图像之间的差距非常小。（它并不总是可见的，如果你调整浏览器的大小，你有时可以看到它）

你可以在这里查看我的 jsfiddle http://jsfiddle.net/shibbydoo/sQGk3/10/

我认为这可能是由于 Firefox 如何调整图像大小的原因是，如果将高度更改为 200 像素，那么一切都很好。有谁知道它为什么这样做？谢谢。

附言。在 Chrome 和 FF 中追踪到的所有图像宽度都相同，但显然不一样......

4

2 回答 2

4

原因

我相信这是由于舍入错误。当您将图像的高度设置为 160 像素且未设置宽度时，您是在告诉浏览器根据原始纵横比设置宽度。这意味着宽度可能不完全是整数，但仍会被浏览器四舍五入到最接近的整数。我怀疑 FF 的舍入方式略有不同，这会导致总数增加一个像素。

最神秘的部分是，两位检查员都报告了所有图像的相同宽度。但是，在 Photoshop 中仔细检查屏幕截图后，似乎 Chrome 将图像总宽度渲染为 682px，而 Firefox 将图像总宽度渲染为 683px（大于 javascript 计算的 682px）。

此图像： https ://encrypted-tbn2.gstatic.com/images?q=tbn: ANd9GcTYhlmIx0ZgQCMA9xmnttw4vvrZIrlZpC9QNBhN9FoBUc46DFse 在 FF 中呈现 1px 宽。

使固定

最好的解决办法可能是使用 100% 大小的图像，而不是让浏览器调整它的大小。这将加载时间减少到最低限度，并确保您不会遇到图像尺寸四舍五入的问题。

于 2013-07-22T23:50:19.833 回答
0

多亏了 compid 和 trojansdestroy，我才能够集思广益地想到这一点。由于每个图像宽度在 FF 和 Chrome（最奇怪的部分）中都被追踪到相同，我只是将图像的宽度设置为被追踪的宽度，然后修复它。

$('.scroller').find('img').each(function(){
    scrollerWidth += this.width;
    $(this).css('width', this.width);
});

这是jsFiddle

于 2013-07-23T16:54:19.177 回答