javascript - Firefox 以不同方式调整图像大小导致图像之间存在间隙/额外像素？

Question

我有一行图像向左浮动，我将图像的大小调整为 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 调整图像大小的原因，如果您将 height 更改为 200px，那么一切都很好。有谁知道为什么要这样做？谢谢。

附言。所有的图片宽度在Chrome和FF中查到都是一样的，但是明显不一样...

Answer 1

原因

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

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

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

修复

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