IE8 中 PNG 的背景颜色
我有以下徽标，它在 FF3、Chrome (#363636) 中显示为与 HTML 正文相同的背景颜色。
但在 IE8 中，它显示不同的、更深的颜色。
这是 FF3/Chrome 原谅我的 PNG，还是只是另一个 IE 错误（我以为他们修复了 IE7 中的 PNG 支持）？
更新：我仍然遇到这个问题，我用来纠正它的 pngcrush 参数是：
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
Win32 二进制链接为 此处。
I have the following logo, which displays as the same background colour as the HTML body in FF3, Chrome (#363636).
But in IE8 it displays a different, darker colour.
Is this FF3/Chrome being forgiving of my PNG, or just another IE bug (I thought they fixed PNG support in IE7)?
Update: I still get this problem, and the pngcrush arguments I use to correct it are:
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
The Win32 binary link is here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
PNG 中有一个伽玛校正信息（gAMA 块）结构。 如果您正在处理需要伽玛校正的照片，那很好，但对于网络来说，这不合适。
在网络上，浏览器通常不会对 HTML/CSS 颜色或其他图像应用伽玛校正，因此，如果您使用伽玛校正，您的 PNG 上会得到与页面其余部分不一致的结果。 由于这个确切原因，某些浏览器不应用 PNG gamma，这就是您获得可变结果的原因。
将徽标加载到图像编辑器中并将其保存回来，而不包含 gAMA 块信息。 更多。
You have a gamma correction information (gAMA chunk) structure in your PNG. That's fine if you're working with photos where you want gamma correction, but it's not the right thing for the web.
On the web, browsers typically do not apply gamma correction to HTML/CSS colours or other images, so if you use gamma correction you'll get results on your PNG that are inconsistent with the rest of the page. Some browsers do not apply PNG gamma for this exact reason, which is why you are getting the variable results.
Load the logo into an image editor and save it back out without the gAMA chunk information. More.
这里评价最高的答案建议使用 pngcrush 将 gamma 值奇怪地重置为 0.5181347。 这可能在某些宇宙中有效，但在我们的宇宙中，最好的路径是从 PNG 中剥离所有颜色空间信息，以便它纯粹在浏览器用于 CSS 颜色的相同中性 RGB 三元组空间中渲染：
这是什么对于真正的色头来说，您设计的原始颜色可能在其他显示器或操作系统上显示不一样，但是具有相同 RGB 值的所有颜色将根据每个用户的浏览器+操作系统以相同的方式呈现。在...上。 具体来说，与 PNG 相邻的背景或相邻颜色将匹配，因此您可以使用互锁的图像和颜色来设计您的网站。
The top-rated answer here suggests a bizarre reset to the gamma value of 0.5181347 using pngcrush. This may work in some universes, but in ours your best path is to strip all color-space information from the PNG so that it is rendered purely in the same neutral RGB-triplet space that the browsers are using for colors in CSS:
What this means for real color-heads is that the original color you designed may not appear the same on another monitor or operating system, but all your colors with the same RGB values will be rendered the same way for each user according to the browser+os they are on. Specifically, background or adjacent colors abutting a PNG will match, so you can design your site with interlocking images and colors.
我已经讨论了 Internet Explorer 中的 PNG 颜色问题 及其解决方案和屏幕截图。 解决方案是从 PNG 图像中删除 gamma 块（例如使用 TweakPNG 实用程序）。 这使得图像在 Internet Explorer 中呈现正确的色调。 一些不常见的浏览器可能仍然表现不正常。
I've discussed the PNG Color Problem in Internet Explorer and its solution with screen shots. The solution is to remove the gamma chunk from the PNG image (using TweakPNG utility for example). This makes the images render in the correct shades in Internet Explorer. Some uncommon browsers may still behave erratically.
您需要从 PNG 中删除 gAMA 和 sRGB 块。
此外，您需要删除附加到图像的任何 ICC 颜色/颜色配置文件。
Photoshop“保存到 Web”添加了标准 sRGB ICC 配置文件 - 这对于内容图像非常有用，但对于需要与 CSS 颜色匹配的样式图像来说完全错误。
这在 Safari 中尤其明显 - 我有一篇关于 Safari 的 博客文章。
You need to remove both gAMA and sRGB chunks from your PNG.
Additionally you need to remove any ICC colour/color profile attached to the image.
Photoshop "Save to Web" adds a standard sRGB ICC profile - that is great for content images but completely wrong for styling images where you need to match to CSS colours.
This is particularly noticeable in Safari - about which I have a blog post.
我注意到所有 IE（6、7、8）都有这个问题。一些 PNG 图像在透明区域周围会有黑色轮廓。 结果我必须打开 Gimp（我的免费跨平台图像编辑器），打开有问题的 PNG，然后使用 150% 的模糊选择工具重新选择透明区域，然后单击删除。 然后重新保存。 这通常可以解决透明区域中 PNG 周围约 98% 的斑点。
如果这不起作用，则重新加载 Gimp，将背景设置为白色，选择拼合图像，将模糊选择阈值设置为 3%，选择要删除的背景，选择删除（清除），然后再次重新选择背景将阈值设置为 150%，删除图像，然后重新保存图像。
请注意，在我的模糊选择工具上，我的 Gimp 设置是选中“抗锯齿”、取消选中“羽化边缘”、选中“选择透明区域”、取消选中“样本合并”和“按合成选择”。
是的，这似乎是具有透明背景的 PNG 图像的 IE 错误。 其他浏览器——Opera、Safari、Firefox、Chrome——都没有这个问题。 我怀疑某些图像程序将透明度设置为 50%，作为某种边缘抗锯齿的一部分，因为只有边缘出现问题。 我认为非 IE 浏览器正在处理像素上的 50% 透明度，但 IE 可能只能理解像素上的 100% 透明度——这只是一种预感。
I noticed this problem across all IEs -- 6, 7, 8. Some of the PNG images would have black outlines around them in the transparent areas. Turned out that I had to open Gimp (my free cross-platform image editor), open the PNG that had the problem, and use the Fuzzy Select tool on 150% to reselect the transparent area and click Delete. Then resave. That usually resolved the blotchiness around the PNGs in the transparent areas about 98%.
If that didn't work, then reload in Gimp, set the background to white, choose Flatten Image, set the Fuzzy Select threshold to 3%, select the background you want to delete, choose Delete (Clear), then reselect background yet again with threshold at 150%, delete, and then resave the image.
Note on my Fuzzy Select tool my Gimp settings were check Antialiasing, uncheck Feather Edges, check Select Transparent Areas, uncheck Sample Merged, and Select By Composite.
Yeah, this appears to be an IE bug with PNG images that have a transparent background. None of the other browsers -- Opera, Safari, Firefox, Chrome -- have this issue. My suspicion is that some image programs are setting like 50% transparency as part of some kind of antialiasing on the edges, because it's only the edges that are having problems. I think the non-IE browsers are handling 50% transparency on a pixel, but IE may only understand like 100% transparency on a pixel -- just a hunch.
这是唯一对我有用的解决方案：
http://forum.jquery.com/topic/transparent -png-显示-ie8中的黑色边缘
This is the only solution that worked for me:
http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
对于其他人来说，了解使用 Yahoo Smushit 优化网络校正图像可能会有所帮助这个问题对我来说（一般来说，通过这个或类似的东西运行你的图像是一个好主意）。
It may be useful to others to know that using Yahoo Smushit to optimize the images for the web corrected this issue for me (and it's a good idea in general to run your images through this or something similar).