Firefox 在特定宽度的 png 的内容框边缘呈现细灰线 - 为什么？答案

【问题标题】：firefoxs renders thin grey lines at content box edges of a png at certain widths - why?Firefox 在特定宽度的 png 的内容框边缘呈现细灰线 - 为什么？
【发布时间】：2010-10-06 23:43:46
【问题描述】：

当 firefox (3.0.6) 以特定宽度（例如 50%）渲染 png 图像时，内容框的左边缘和上边缘会显示一条细灰线。线条在其他宽度处消失（例如 70%）。此外，原始图像中似乎没有这条线（使用 gimp 检查图像）。

这种现象发生在没有 CSS 样式标记的情况下——在下面的 HTML 示例中，CSS 的存在是为了阐明灰线的位置——灰线似乎很明显出现在内容框本身。

我很难想象这是一个真正的 Firefox 错误，我想知道我忽略或没有掌握什么概念......

感谢您的宝贵时间和任何建议/想法...

图片可见here http://datlisp.blogspot.com/2009/02/img-width-tag-and-firefox-rendering-of.html

html:

<html>
<head><title>problems with pngs</title></head>
<body>
<div style="border-color: red; border-width: thin; border-style: solid;
      padding: 2px">
<img src="http://imagebin.ca/img/ato4dM.png"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
    padding: 2px;"/>    
</div>
</body></html>

【问题讨论】：

我在查看您的原始图像时没有看到这一点。这听起来像是 Mozilla 支持论坛的错误报告/问题，而不是编程问题。
图片链接都不起作用。我最终看到一个页面，上面写着“你不能从这里做到这一点”。防火墙什么的？
进入页面后重新加载图像 - 这是一个热链接。
@Andy Mikula 如果你要回答这个人的问题，为什么不发布答案
我已经按照安迪的说法重新加载了图像，但仍然只收到错误消息。 :

标签： image firefox png width line

【解决方案1】：

将图像保存为 PNG-24。尝试在浏览器中动态调整 PNG-8 图像的大小时，我遇到了类似的像素失真问题。

另外，我不确定这是否适用于您的特定情况，但如果可能，您应该在图像显示到浏览器之前调整它们的大小。如果您尝试以较小的格式显示非常大的图像，则依赖浏览器调整大小会导致失真并且可能会增加带宽使用量。

【讨论】：

--------- 我仍然看到相同的效果（灰线出现在 50% 宽度但在渲染图像时不存在以更高的宽度（例如 80%），同时使用 imagemagick 调用的“PNG32”和 imagemagick 调用的“PNG24”。

【解决方案2】：

我一直在处理一个图片库时遇到了类似的问题（抱歉，由于我是新手，所以无法链接）。缩略图显示为实际大小，没有进行 html/css 调整大小。

有时它们会在图像 div 和阴影背景之间的右侧和底部获得 1 像素宽的线。我们花了一段时间才弄清楚为什么它只是有时会发生，但我们将其范围缩小到 Firefox 缩放设置。

如果您在 Firefox 中缩放页面（ctrl 和鼠标滚轮，或 ctrl 和 +/-），那么就像您的情况一样，它们会以特定的缩放级别出现。重置为 100% 缩放（ctrl 和 0）每次都会为我们修复它，但对使用缩放功能的人没有帮助。

【讨论】：

【解决方案3】：

使用您的演示页面和图片，我没有发现任何问题。

可能是视频驱动程序的问题？我相信 firefox（和 cairo，它使用的图形库）利用硬件加速来平滑地调整图像大小，不幸的是你不能禁用它 AFAIK。

尝试通过远程协议登录以绕过视频卡并进行检查。至少你可以得到一些安心。 :)

【讨论】：

当通过隧道浏览到 sparc 框时，灰线仍然显示。但是，从到目前为止的 cmets 来看，这听起来并不是一个误解 HTML 或 CSS 的愚蠢问题……所以可能不是真正的堆栈溢出项……
嘿，很高兴你能记住。 :)

【解决方案4】：

在 div-tag 中显示 .png-image 时，我遇到了类似的问题。在图像的一侧渲染了一条细黑线。为了修复它，我必须添加以下 CSS 样式：box-shadow: none;

【讨论】：