如果浏览器不支持 png，则将 png 替换为 gif 文件答案

【问题标题】：Replacing a png with a gif file if png is not supported in browser如果浏览器不支持 png，则将 png 替换为 gif 文件
【发布时间】：2011-12-21 09:46:17
【问题描述】：

我知道这个问题与 IE 浏览器无法显示 PNG 文件有关，特别是如果您是 Windows Vista 的高级用户并且您使用的是 IE7。我希望只有在不支持 png 的情况下才能找到用 gif 替换 PNG 文件的解决方案。有没有办法从 javascript 或 css 的角度来实现这样的效果？我正在尝试为 div 标签上的背景图像完成此操作。

谢谢！

【问题讨论】：

PNG 在 IE7 上受支持。你的意思是透明 PNGs？
作为 vista 的高级用户，如果您在 IE7 中打开浏览器，您将无法获得其中任何一个

标签： html png gif

【解决方案1】：

您可以使用 IE 的 conditional css 覆盖背景图片

<style type="text/css">
   div.something { background: url(someimage.png); }
</style>

<!--[if lte IE 7]>
<style type="text/css">
   div.something { background: url(override.gif); }
</style>
<!-- <![endif]-->

【讨论】：

我认为您不需要最后一行的<!--...除非它出于其他原因/易于代码注释？
出色的工作，大卫对标签的看法是正确的。现在，这项技术将繁重的工作留给了设计师，以匹配 png 的透明效果的方式设计 gif 图像。再次感谢！

【解决方案2】：

关于这个问题有一些想法：

Is it possible to check for PNG support with jQuery.Support?

您可能不得不使用一些 css hack。以 IE 7 为目标。

这个页面有一些技巧可以做到这一点： http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

【讨论】：

第二个链接中提到的技术均不适用于我的 IE7 版本