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

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

<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; 
}

而例如CSS的：link和：悬停：

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

来源

2010-02-04 Alexander

你的CSS应该看起来更像：

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

有错在你的CSS两件事情：

URL（...） - 150像素：你必须在CSS属性
属性之间的空间 - 150px 0无重复：背景重复（和背景附件）应在速记背景位置之前

来源

2010-02-04 01:49:29

谢谢！那样做了。那么它似乎懒惰的CSS是问题:) – Alexander 2010-02-04 02:01:45

高兴地帮助。一些浏览器比其他浏览器更宽容。当然，有时他们对错误的容忍可能会使调试更加困难。 – 2010-02-04 02:05:16

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

回答

相关问题