图像精灵和跨浏览器兼容性问题

Question

我在我的网站上遇到了一些问题，包括图像精灵和IE兼容性。

这是一个jsfiddle：http://jsfiddle.net/lipestyle/EjQTP/7/

两个主要问题是：

1. 在IE中，底部的联系人链接不会显示在蓝色栏中，而是显示在网站其余部分的下方和右侧。
2. MMA Cage Door和FightNight Nutrition的图像精灵不起作用。看起来悬停图像一直在显示，因为非悬停图像应该比我们看到的要轻得多。

在旁注 - 由于某种原因，背景图像重复在jsfiddle中不起作用，但我没有注意到它之外的问题。

非常感谢您提供的任何建议。

谢谢。

修改

我注意到精灵的另一件事。当我将鼠标悬停在图像上时，第一张图像不会消失，当悬停图像出现在图像顶部时，它仍会保留。它是如何工作的？因为我的图像是半透明的，所以我希望尽可能避免这种情况。

以下是有效网站的链接：http://bit.ly/h1OXQA

Answer 1

1. 可以是宽度，边距左边，甚至位置相对/绝对给出问题。我没有通过所有css代码深入检查以查看原因。一个快速/脏的修复，显然是为IE7加载替代css或html，是设置（在IE7中）UL #social与top：190px和left：100px，它似乎适合（或微调到首选位置）。我会从这里开始猜测造成不同行为的原因。

2. 似乎你已经修好了，图像在不悬停时看得很清楚，在悬停时看得更暗。全部在IE7中。