奇怪的CSS行爲（精靈NAV W /展期）

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的doctype，< DOCTYPE HTML >，爲適應未來發展指明：

<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

只是尋找一些洞察到這個（希望）簡單的問題。提前致謝！

來源

2009-08-07 Andrew

其中指定背景圖像比樣式的標籤更具體的風格，所以它需要優先。

而不是使用複合風格background，也默認設置background-position到0% 0%的，指定單獨的組件：

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

你可以閱讀有關的特異性here。

來源

2009-08-07 20:46:40 Guffa

這個技巧。我的理由是，在事實之後指定的更具體的背景位置將覆蓋左上角/0.0的原始默認位置。似乎與級聯樣式表的級聯部分有點反直覺，但它起作用，我很感激。 – Andrew 2009-08-07 20:53:33

我不確切地知道問題出在哪裏，但聽起來像是您的CSS規則的相對優先級問題。

對於這樣的問題，Firebug非常好 - 它會告訴你任何給定的元素究竟是哪個CSS規則爲它觸發。這應該可以幫助你發現問題所在。

（原諒我，如果你已經知道的螢火蟲，但Web開發人員數量驚人不要。）

來源

2009-08-07 20:37:31 RichieHindle

奇怪的CSS行爲（精靈NAV W /展期）

回答

相關問題