Internet Explorer 6/7 中的精灵

Question

我似乎无法让我的精灵在 IE 7 及更低版本中正常工作。 （IE 9 工作正常） 下面是我的 CSS：

#info 
{
    width:100%;
    height:77px;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px 0px;
    float:left;
    display:block;
    clear:both;
}
#info:hover
{ 
    width:100%;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px -300px;
    cursor: default;
    float:left;
}

还有两个这样的类

我已尝试搜索该问题的解决方案，但解决方案不适用于我的问题。

编辑：对不起，我没有描述我的实际问题。图像在 IE 中根本不显示。

这是我的html代码：

              <div id="info">
              </div>        

                    <asp:Literal ID="litInfo" runat="server" />        



              <div id="bestilling">
              </div>          
                    <asp:Literal ID="litBestilling" runat="server" />          


              <div id="kontakt">

                    <asp:Literal ID="litKontakt" runat="server" />

如您所见，我用 C# 对网站进行了编码。文字放置在 div 之外，因为它们应该包含的唯一内容是图像。 （它们是头条新闻）

Answer 1

你没有提供你的 HTML，所以我假设你的 ID 应用到的标签不是锚标签？

IE6/7 仅支持 :hover 伪锚标签。

这应该可行：

a#info 
{
    width:100%;
    height:77px;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px 0px;
    float:left;
    display:block;
    clear:both;
}
a#info:hover
{ 
    width:100%;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px -300px;
    cursor: default;
    float:left;
}

...如果您的 HTML 是：

<p><a id="info" href="#">Hello World</a></p>

希望这有效吗？提供更多信息以获得更好的答案！

谢谢， 迈克尔。