html - 不会显示 Sprite 图像？

Question

为什么这不会显示我的 Sprite 图像作为黄色边框框的背景？
这里有一个例子:

如果有人能举例说明我应该改变什么，那就太好了。

这是我的代码:

HTML:

<div class="repeat">
    <div style='width:100%;'>
        <div style='float:left;margin-top:107px;margin-left:50px;width:80px;height:100px;border:1px solid yellow;'>
            <div class="menu">
                <ul id='nav'>
                    <li class='front'><a href='?p=front'>Front</a></li>
                </ul>
            </div>
        </div>
        <div style='float:left;margin-top:107px;margin-left:10px;width:80px;height:100px;border:1px solid yellow;'></div>
        <div style='clear:both;'></div>
    </div>
</div>

CSS:

.repeat {
    float:left;
    width: 884px;
    height: auto;
    min-height:700px;
    background: url(images/repeat.png) repeat-y;
    z-index:2;
}

.menu {
    width:80px;
    height:100px;
    position:relative;
    }
    ul#nav {
        list-style: none inside;
        }
        ul#nav li {
            display: inline;
            }
            ul#nav li a {
                display: block;
                height: 40px;
                float: left;
                }
                ul#nav li.front  a{
                    width:80px;
                    background: url(images/menu/p1.png) top center no-repeat;
                    }               
                    ul#nav li a:hover {
                        background-position: bottom center;
                    }
                ul#nav li.front2  a{
                    width:80px;
                    background: url(images/menu/p1.png) bottom center no-repeat;
                }

Answer 1

您的 Sprite 显示得很好...
只是它在整体设置中不可见。 尝试将 height: 80px 添加到您的“ul#nav li.front a”选择器，您会发现哪里出错了。
从那里试穿自己。

提示:使用浏览器开发工具(我更喜欢 Chrome)并将鼠标悬停在每个元素上以查看它们占据的区域。在您的情况下，请检查“div menu”和“li a”元素。