html - CSS Sprite 只显示最终图像

Question

我有一个 sprite 表，我想并排显示图像，但代码只显示最终图像。所以这段代码只显示谷歌图片，但它确实显示正确(使用:悬停)但它不显示 facebook 或 twitter 图片。

我知道坐标是正确的，如果我注释掉 google <li>当我刷新页面时，只显示 facebook 图片。我不知道它有什么问题，但想知道它是否与显示属性有关？

编辑:这是正在发生的事情的一个活生生的例子: http://jsfiddle.net/Duykb/

<div class="social"><h3>SHARE THIS PAGE</h3>
     <ul id="social">
         <li class="facebook">
             <a href="#" title="Facebook"></a></li>
         <li class="twitter">
             <a href="#" title="Twitter"></a></li>
         <li class="google">
             <a href="#" title="Google+"></a></li> 
    </ul>
 </div>

CSS:

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; }

#social {
margin-top: 10px;   
display: block;
position:relative;
padding-top: 30px; }        

#social li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0; }

#social li, #social a {
height:37px;
display:block; }


ul#social li.facebook a {
background: url('images/social_icons.png') no-repeat -5px -4px;
width: 37px;
height: 37px; }

ul#social li.facebook a:hover {
background: url('images/social_icons.png') no-repeat -5px -42px;
width: 37px;
height: 37px; }

ul#social li.twitter a {
background: url('images/social_icons.png') no-repeat -45px -4px;
width: 37px;
height: 37px; }

ul#social li.twitter a:hover {
background: url('images/social_icons.png') no-repeat -45px -42px;
width: 37px;
height: 37px; }

ul#social li.google a {
background: url('images/social_icons.png') no-repeat -82px -4px;
width: 37px;
height: 37px; }

ul#social li.google a:hover {
background: url('images/social_icons.png') no-repeat -82px -42px;
width: 37px;
height: 37px; }

Answer 1

我认为你的<li>由于它们的绝对定位，它们都位于彼此之上。因此，您正在处理分层问题。

如果您希望它们都并排放置，请尝试为每个 block 元素设置一个宽度，并使用 left: 给它们一个绝对位置。或 right:属性。

编辑:

更改 #social li规则...

    #social li {
    margin:0;
    padding:0;
    list-style:none;
    width: 37px;
    float:left;
}

http://jsfiddle.net/Duykb/2/