Question

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

这种现象发生在没有CSS样式标记的情况下 - 在下面的HTML示例中，CSS用于阐明灰色线的位置 - 似乎很清楚，灰色线条出现在边缘处。内容框本身。

我很难想象这是一个真正的火狐虫，我想知道我忽略了什么概念或者没有抓住......

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

可以看到图片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>

Answer 1

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

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

更多信息：http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm

Answer 2

我和我一直在制作的图片库有类似的问题（对不起，因为我是新手而无法链接）。缩略图图像显示实际大小，没有进行html / css调整大小。

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

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

Answer 3

使用您的演示页面和图像我无法看到任何错误。

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

尝试通过远程协议登录以绕过视频卡并将其检出。至少你可以放心。：）

Answer 4

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

firefox在某个宽度的png的内容框边缘渲染细灰线 - 为什么？

4 个答案: