Firefox 在特定宽度的 png 的内容框边缘呈现细灰线 - 为啥？
Posted
技术标签:
【中文标题】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 错误，我想知道我忽略或没有掌握什么概念......
感谢您的宝贵时间和任何建议/想法...
图片可见herehttp://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"
style="border-color: blue; border-width: thin; border-style: solid;
padding: 2px;"/>
</div>
</body></html>
【问题讨论】：
我在查看您的原始图像时没有看到这一点。这听起来像是 Mozilla 支持论坛的错误报告/问题，而不是编程问题。 图片链接都不起作用。我最终看到一个页面，上面写着“你不能从这里做到这一点”。防火墙什么的？ 进入页面后重新加载图像 - 这是一个热链接。 @Andy Mikula 如果你要回答这个人的问题，为什么不发布答案 我已经按照安迪的说法重新加载了图像，但仍然只收到错误消息。 : 【参考方案1】：将图像保存为 PNG-24。尝试在浏览器中动态调整 PNG-8 图像的大小时，我遇到了类似的像素失真问题。
另外，我不确定这是否适用于您的特定情况，但如果可能，您应该在图像显示到浏览器之前调整它们的大小。如果您尝试以较小的格式显示非常大的图像，则依赖浏览器调整大小会导致失真并且可能会增加带宽使用量。
更多信息：http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm
【讨论】：
--------- 我仍然看到相同的效果（灰线出现在 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;
【讨论】：
以上是关于Firefox 在特定宽度的 png 的内容框边缘呈现细灰线 - 为啥？的主要内容，如果未能解决你的问题，请参考以下文章