CSS Sprite 不工作 - 编辑这个小提琴答案

【问题标题】：CSS Sprite not working - Edit this FiddleCSS Sprite 不工作 - 编辑这个小提琴
【发布时间】：2013-12-28 07:15:06
【问题描述】：

谁是 Sprites 的高手？

我今天在一个网站上更新了代码，并且肯定在过去的某个时间对 CSS 进行了一些更改。

现在，Sprite 在鼠标悬停时不起作用。

CSS：

.sprite {
  position: relative;
  margin-top: 5px;
  text-shadow:4px 4px 8px #696969;
  vertical-align: -10px;
}
.sprite span {
  top: 10px;
  padding-left: 15px;
}
.sprite a {
  background: url('http://i.imgur.com/92jBDie.png') no-repeat fixed 0 -100px;
  color:Silver;
  display:block; 
  height:50px;
  width:150px;    
}
.sprite a:hover {
  background-position: 0 -50px;
  color:Red;
}
.sprite a:active {
  background-position: 0 0;        
  color:Black;
}

HTML：

<div>
  <ul id="menu">
    <li class="sprite"><a><span>1</span></a></li>
    <li class="sprite"><a><span>2</span></a></li>
    <li class="sprite"><a><span>3</span></a></li>
    <li class="sprite"><a><span>4</span></a></li>
    <li class="sprite"><a><span>5</span></a></li>
  </ul>
</div>

在Fiddle

今天我花了太多时间试图弄清楚这一点。

有人可以帮忙吗？

【问题讨论】：

标签： html css sprite

【解决方案1】：

下面一行

.sprite a {
      background: url('http://i.imgur.com/92jBDie.png') no-repeat fixed 0 -100px;
}

应该是

.sprite a {
      background: url('http://i.imgur.com/92jBDie.png') no-repeat 0 -100px;
}

像这样：http://jsfiddle.net/KEfhd/3/

【讨论】：

是的！看起来是这样的。谢谢。

【解决方案2】：

它与精灵无关，列表和正文添加边距和填充（默认情况下）。

要么实现重置样式表，要么像我一样手动清除它们：

我添加了

body, div, ul, li {
    margin: 0;
    padding: 0;
}

并在.sprite中注释掉/*margin-top: 5px;*/

在这里查看小提琴：http://jsfiddle.net/KEfhd/2/

【讨论】：

+1，但是……这些都应该是一样的。在你的情况下，1 和 2 的行为不同，而 3、4 和 5 什么都不做（就像我的一样）。