3

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

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

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

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

图片可以在这里看到 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>
4

4 回答 4

1

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

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

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

于 2009-02-13T02:06:40.257 回答
1

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

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

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

于 2009-05-20T23:22:36.803 回答
0

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

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

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

于 2009-02-13T03:04:25.783 回答
0

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

于 2014-03-04T20:31:24.183 回答