Firefox和IE中的jQuery / CSS图像分辨率问题

Question

我得到了解决方案：使用带背景而不是img标签的div就像魅力一样。（但是知道为什么会发生这种情况会很好，所以如果你有一个想法感觉免费评论。）

我有一个奇怪的问题。我的网站上有一个png图像，从280x280像素调整到40x40像素（在CSS中它是40 x auto）。问题是图像在边缘上出现像素化，但是当我用jQuery点击事件（相同尺寸，只是彩色）将其更改为其他图片时，它看起来很宽的锐利边缘。如果我更改顺序并首先显示彩色版本，然后更改它，则彩色版本会出现像素化。所以不知何故，这种变化会影响我猜想的图像，但是当我再次点击它来改变它时它再次像素化。我试着用jQuery添加img，没有效果。以前有人见过这样的东西吗？有任何想法吗？这种情况发生在Firefox中。在IE中，pic在两种状态下都是像素化的。在chrome中它可以正常工作。

更新：

这是点击之前的样子：

点击后：

更新2：

我以为我找到了一个解决方法，但我发现了一半的解决方法...所以我制作了第一个png的gif图像。我首先显示，然后在点击事件中，我在两个png-s之间切换，它们看起来很好。但是当然，第一次加载的gif也有同样的问题。如果我在document.ready上更改它，那么png会变得像素化......