奇怪的 CSS 行为（带有翻转的精灵导航）

Question

这是有问题的导航图像：

http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png

我想做的事情非常基本，而且我过去已经做过很多次了，我只是不明白为什么它现在不起作用。 基本上使用上面的图像作为导航背景并相应地调整宽度和背景位置。 这是我的 CSS：

#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }

        #navigation ul { margin: 0 0 0 20px; padding: 0; }
            #navigation ul li { float: left; list-style: none; }
            #navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}

                #nav-home { width: 62px; }
                    #nav-home.active, #nav-home:hover { background-position: 0 -28px; }

                #nav-cp { width: 130px; background-position: -62px 0; }
                    #nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }

                #nav-web { width: 106px; background-position: -192px 0; }
                    #nav-web.active, #nav-web:hover { background-position: -192px -28px; }

                #nav-clix { width: 106px; background-position: -298px 0; }
                    #nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }

                #nav-dna { width: 90px; background-position: -405px 0; }
                    #nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }

这是页面代码，带有通用 HTML5 文档类型 ，指定用于将来的校样：

<div id="navigation">

    <ul id="nav-tabs">
        <li><a href="#" id="nav-home">Home</a></li>
        <li><a href="#" id="nav-cp">Client Portal</a></li>
        <li><a href="#" id="nav-web">Weboptima</a></li>
        <li><a href="#" id="nav-clix">Clixfactor</a></li>
        <li><a href="#" id="nav-dna">Lead DNA</a></li>
    </ul>

</div>

我遇到的奇怪的事情是： 第一个选项卡“主页”运行完美。 除非我指定 !important，否则其余四个选项卡不遵守初始背景位置属性，但翻转效果很好。 以下分别是这两种情况的图像：

http://img.skitch.com/20090807- fybag852bbbi6ut751w167y1hp.png

http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png

只是想深入了解这个（希望）简单的问题。 提前致谢！

Answer 1

您指定背景图像的样式比选项卡的样式更具体，因此它具有优先性。

不要使用复合样式 background（默认情况下也会将 background-position 设置为 0% 0%），而是指定单独的组件：

background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat;

您可以此处了解特异性。

Answer 2

我不知道问题到底是什么，但这听起来像是 CSS 规则的相对优先级的问题。

对于此类问题， Firebug 非常出色 - 它会告诉您对于任何给定元素，到底触发了哪些 CSS 规则它。 这应该可以帮助您了解问题所在。

（如果您已经了解 Firebug，请原谅我，但令人惊讶的是，数量惊人的 Web 开发人员并不了解。）