在 IE6 中用 png 替换 CSS 图像答案

【问题标题】：Replace CSS image with png in IE6在 IE6 中用 png 替换 CSS 图像
【发布时间】：2011-05-21 10:17:02
【问题描述】：

我正在寻求有关如何更改 CSS 创建的图像的帮助

它是一个信息图标，位于 IE6 中图像的标题中。图片是.png

<h1>header title<\h1><a href="#" id="info-icon"><span>i</span></a>

目前，CSS 图像图标绝对位于相对标题之外。也许它应该浮动？

我只是不确定使用什么编码逻辑来替换与 CSS 图像相同位置的 png 图像。是否涉及条件逻辑？

任何帮助将不胜感激。

道格

【问题讨论】：

【解决方案1】：

您可以做的是将您的图片放在该链接或范围内（无论您的“CSS 图片”在哪里定义），然后使用条件 CSS 规则为非 IE6 浏览器隐藏图片。但是，使用条件 CSS 是不好的风格。您要解决的一般问题是什么？为什么IE要用PNG，其他浏览器用背景图？

【讨论】：

感谢您的回复。澄清一下，我想使用一个 CSS 创建的图标（CSS3、圆角等用于 webkit、moz 浏览器），因为 IE6 不会显示（或可以呈现这个 CSS3 代码）我想让它显示一个 png 图像图标。这有助于澄清吗？？？
还是有点不清楚。这个“CSS 图标”是在前台还是后台？如果它在前台，看起来你最好把它做成一个传统的图像图标，这样你就不必添加条件 CSS 逻辑，这不是语义并且容易出现错误。如果是背景图片，我建议您再次将其转换为前景图片图标，这样您就不需要使用条件逻辑。