0

看下面的代码：

<div class="features">
    <h1>BLAH BLAH</h1>
    <ul>
        <li>
           <span class="navigate-best"><img class="gourmet">Gourmet</span>
        </li>
        <li>
           <span class="navigate-best"><img class="north">North</span>
        </li>
    </ul>
</div>

这是html。下面是CSS

.features ul li  span img{
    background: url(../images/result.png) no-repeat;
    float: left;
    margin-left: -10px;
    margin-top: 3px;
    padding-right:10px;
}

.gourmet{
    background-position: -0px -400px;
    width: 16px; 
    height: 16px;
}

.dessert{
    background-position: -0px -108px;
    width: 16px;
    height: 16px;
}

实际上navigate-best是一个显示按钮之类的链接的类，我正在尝试使用 CSS 精灵在每个按钮的左端添加图像。

假设对于名为“Gourmet”的按钮，我已经调用了类gourmet ，并且精灵中的相应图像位于，-0px -400px但这不起作用。我得到的只是精灵中的第一张图片。每个按钮都会发生这种情况。我究竟做错了什么？

4

1 回答 1

1

它看起来像一个特异性问题。

.features ul li span img{
    background: url(../images/result.png) no-repeat;
    border:0 none; /* Oh god no!! In google chrome a border is being added to the images. */
    float: left;
    margin-left: -10px;
    margin-top: 3px;
    padding-right:10px;
}

尝试这个 ：

.features ul li span img.gourmet{
    background-position: -0px -400px;
    width: 16px; 
    height: 16px;
}

.features ul li span img.dessert{
    background-position: -0px -108px;
    width: 16px;
    height: 16px;
}

但是可以肯定的是，如果没有诸如 jsFiddle 之类的工作示例，我无法确定您的情况以及我的建议将解决它。

于 2013-07-25T18:30:30.230 回答