Firefox 在 div 中的图像后添加额外空间（或使 div 更大）答案

【问题标题】：Firefox adds extra space after image in div (or makes divs bigger)Firefox 在 div 中的图像后添加额外空间（或使 div 更大）
【发布时间】：2014-10-11 06:22:38
【问题描述】：

大家好，

我正在处理的这个网站上的 Firefox 有问题：

Link

我已经构建了一个水平滑块，它适用于所有浏览器，除了 firefox（OSX 和 Windows）。问题是 firefox 在滑块中的图像之后显示的边距/填充/空间比它应该具有的 5px 左右边距更多。另一个奇怪的事情是第一张图片的间距比其他图片小。

我已尝试包含一个 .js 解决方法：

function onPageLoad(){
    // Firefox rare spacing fix //
    setTimeout(function() {
        jQuery('.horizItem').each(function() {
            var outerWidth = jQuery(this).find('img').outerWidth();
            jQuery(this).width(outerWidth);
        });
    }, 300);
}
onPageLoad();

这在大多数情况下都有效，但有时它会使包含图像的 div 宽度为 10 或 20 像素。所以它弄乱了滑块。

是否有一个简单的 css 修复程序可以用来消除这些奇怪的间距？

我在元素检查器中似乎真的找不到间距的来源......当我将div的宽度与图像的宽度进行比较时，差异（减去预期的 10px 边距）是 15.883px，这也是一个奇怪的数字。

有人可以帮助我吗？我觉得这是我在某个地方犯的一个非常简单的错误。

非常感谢。

【问题讨论】：

您是否正在使用任何类型的框架？通过奇怪的“过度”宽度猜测，我认为某处可能会增加百分比的填充/边距。
这是一个 wordpress 网站和现有的主题，但我似乎无法找到源...我正在疯狂地尝试解决这个问题...不幸的是，客户本人正在使用 Firefox。

标签： html image firefox margin spacing

【解决方案1】：

我在制作 Tumblr 主题时遇到了类似的问题；图像和 Tumblr 照片集（显示在 iframe 中的照片）在它们下方显示了一点“填充”，尽管 CSS 中的填充为零。解决方法是让它们成为块；

img, iframe {
    display: block;
}

也许您可以尝试将图像显示为inline-block，因为它们是并排的？

【讨论】：

谢谢，但我已经制作了 img 标签块，但不幸的是，这对我不起作用。