Css-sprite 菜单在 ie 中不起作用答案

【问题标题】：Css-sprite menu not working in ieCss-sprite 菜单在 ie 中不起作用
【发布时间】：2010-02-04 09:54:59
【问题描述】：

为什么 Internet Explorer 不呈现我制作的这个 .css sprite 菜单？有人可以为我解释一下，因为我无法在代码中找到任何错误。 HTML：

<div class="menu">
     <ul class="nav">
         <li class="home"><a href="#"></a></li>
            <li class="element2"><a href="#"></a></li>
            <li class="element3"><a href="#"></a></li>
            <li class="element4"><a href="#"></a></li>
            <li class="element5"><a href="#"></a></li>
            <li class="element6"><a href="#"></a></li>
            <li class="element7"><a href="#"></a></li>                
        </ul>
    </div>

用于包装器和链接的 Css：

    .menu{
     height:350px;
     margin:0;
     padding:0;
     float:left;
     width:150px;  
    }

/*Menu*/
.nav{
 background:url("menusprite.png");
 height:350px;
 padding:0;
 margin:0;
}
.nav li{
 list-style:none;
 padding:0;
 position:relative;
 top:0;
}
.nav li, .nav a{
 height:50px;
 display:block;
}

以及 a:link 和 :hover 的示例 css：

.home{ 
        left:0;
     height:50px;
}
.home a:hover{
     background:url("menusprite.png")-150px 0 no-repeat;
}

【问题讨论】：

标签： html internet-explorer css-sprites

【解决方案1】：

你的 css 应该看起来更像：

.home a:hover{
     background:transparent url("menusprite.png") no-repeat scroll -150px 0;
}

您的 css 中有两处错误：

url(...)-150px：css属性中的属性之间需要有空格
-150px 0 no-repeat：background-repeat（和 background-attachment）应该在简写中的 background-position 之前

【讨论】：

谢谢！做到了。好吧，似乎懒惰的 css 是问题所在:)
很高兴为您提供帮助。有些浏览器比其他浏览器更宽容。当然，有时他们对错误的容忍度会使调试变得更加困难。