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

Firefox resize image differently causing gap/extra pixels between images?

本文关键字：图像 之间 存在 间隙 外像素 方式 调整 Firefox      更新时间：2023-09-26

我有一行向左浮动的图像，我将图像的大小调整为高度：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中的相同。你可以看到图像之间有一个非常小的间隙。（它并不总是可见的，如果你调整浏览器的大小，你有时会看到它）

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

我认为这可能是因为Firefox调整图像大小的方式，如果你将高度更改为200px，那么一切都很好。有人知道它为什么这么做吗？谢谢

ps。在Chrome和FF中，所有的图像宽度都是一样的，但显然不一样。。。

原因

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

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

此图像：https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTYhlmIx0ZgQCMA9xmnttw4vvrZIrlZpC9QNBhN9FoBUc46DFse在FF.中渲染1倍宽

修复

最好的解决方案是以100%的大小使用图像，而不是让浏览器调整大小。这将加载时间减少到最低限度，并确保图像尺寸的舍入不会出现问题。

多亏了compid和木马程序，我才能够集思广益。由于在FF和Chrome中，每个图像的宽度都是相同的（最奇怪的部分），我只是将图像的宽度设置为所跟踪的宽度，并修复了它

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

这是jsFiddle

相关文章：