奇怪的CSS行爲

對不起，這篇文章的長度。這是一個相當奇怪的問題，我想盡可能多地提供信息。奇怪的CSS行爲

我有我用於水平導航菜單的以下css規則。菜單是使用ASP創建的：中繼器和項目的數據庫表。

#nav 
{ 
    margin: 0px; 
    padding:0px; 
    list-style-type: none; 
    height: 20px; 
    margin-right:auto; 
    margin-left:auto; 
    width:726px; 
} 

#nav > li 
{ 
    margin:0px; 
    padding:0px; 
    display:inline-block; 
    color: #FFFFFF; 
    height:17px; 
    border:0px; 
    width:90.75px; 
    text-align:center; 
    position:relative; 
    float:left; 
} 

#nav > li > ul 
{ 
    margin:0px; 
    padding:0px; 
    position: absolute; 
    left: -999em; 
    display:block; 
    overflow:visible; 
    z-index:100; 
    width:150px; 
    background-color:#eee; 
} 

#nav > li:hover > ul 
{ 
    left:0px; 
    z-index:100; 
    box-shadow: 0px 0px 5px #555; 
    -moz-box-shadow: 0px 0px 5px #555; 
    -webkit-box-shadow: 0px 0px 5px #555; 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=80); 

    /* Netscape */ 
    -moz-opacity: 0.8; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.8; 

    /* Good browsers */ 
    opacity: 0.8; 

} 

#nav > li > ul > li 
{ 
    left:0px; 
    display:block; 
    color:#333; 
    width:150px; 
    text-align:left; 
    height:auto; 
} 


#nav a, #navbottom a 
{ 
    line-height:20px; 
    display:block; 
    height:20px; 
    border-bottom:2px solid #0c1b53; 
} 

#nav a:link, #navbottom a:link, #nav a:visited, #navbottom a:visited 
{ 
    border-bottom:2px solid #0c1b53; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#nav a:hover, #navbottom a:hover 
{ 
    border-bottom:2px solid #fff; 
} 

#nav a:active, #navbottom a:active 
{ 
    border-bottom:2px solid #fff; 
    color: #FEFFBD; 
    text-decoration: none; 
} 

#nav > li > ul > li a:link 
{ 
    margin:10px; 
    line-height:15px; 
    height:auto; 
    color:#444; 
    border-bottom: 1px solid #777; 
    /* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=100); 

    /* Netscape */ 
    -moz-opacity: 1.0; 

    /* Safari 1.x */ 
    -khtml-opacity: 1.0; 

    /* Good browsers */ 
    opacity: 1.0; 
} 

#nav > li > ul > li a:hover 
{ 
    color:#222; 
    border-bottom: 1px solid #555; 
}

它產生的HTML低於：

<ul id="nav"> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl01$LinkIdField1" id="ctl00_TopNavRepeat_ctl01_LinkIdField1" value="1" /> 
     <a id="ctl00_TopNavRepeat_ctl01_HyperLink1" title="Home Page" href="../default.aspx">Home   </a> 
     <ul></ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl02$LinkIdField1" id="ctl00_TopNavRepeat_ctl02_LinkIdField1" value="10" /> 
     <a id="ctl00_TopNavRepeat_ctl02_HyperLink1" title="News from the IMA" href="../news/list.aspx">News   </a> 
     <ul></ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl03$LinkIdField1" id="ctl00_TopNavRepeat_ctl03_LinkIdField1" value="11" /> 
     <a id="ctl00_TopNavRepeat_ctl03_HyperLink1" title="About the IMA" href="../organisation/history.aspx">Organisation </a> 
     <ul> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl01_HyperLink1" title="about the IMA" class="dropdown_Item" href="../organisation/history.aspx">About   </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl02_HyperLink1" title="This is a description" class="dropdown_Item" href="list.aspx?type=all">Members  </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl03_HyperLink1" class="dropdown_Item" href="../Boats/list.aspx#">Boats</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <input type="hidden" name="ctl00$TopNavRepeat$ctl06$LinkIdField1" id="ctl00_TopNavRepeat_ctl06_LinkIdField1" value="14" /> 
     <a id="ctl00_TopNavRepeat_ctl06_HyperLink1" href="../adverts">Ads   </a> 
     <ul> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl01_HyperLink1" title="All For Sale Items" class="dropdown_Item" href="../adverts/list.aspx?type=sale">For Sale  </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl02_HyperLink1" title="All Wanted Items" class="dropdown_Item" href="../adverts/list.aspx?type=wanted">Wanted   </a> 
      </li> 
      <li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl03_HyperLink1" title="Advertise with the IMA" class="dropdown_Item" href="../adverts/edit.aspx?action=New">Post an Ad  </a> 
      </li> 
     </ul> 
    </li> 
</ul>

這將產生（一些列表項已經爲急促省略）的菜單如下。儘管「組織」和「廣告」這兩個項目都有三個子項目，儘管每個子項目看起來都是相同的，但組織中的第二個項目顯示的規則是nav> li a而不是nav> li> ul> li a。

As the menu displays http://dl.dropbox.com/u/4913815/Untitled.png

我一直在做的時候並儘可能我不能告訴正在發生的事情。任何人都可以解釋嗎？

來源

2010-08-12 Michael Allen

我不知道這是如何導致這個問題的，但我注意到成員是你顯示的沒有引用父目錄「../」的唯一URL。作爲一種測試，也許可以嘗試將成員的URL改爲「../organisation/history.aspx」，即使這不是你想要的，它可能會揭示一些奇怪的怪癖，如果它這樣工作的話。 – AaronLS 2010-08-12 16:36:01

當我將這段代碼和CSS粘貼到Firebug中時，它正確無誤。 Members項目獲得與其他項目相同的nav> li> ul> li CSS。如果您使用Firebug插件在Firefox中加載您的網站，您可以查看會員是否繼承了其他某些樣式。 – AaronLS 2010-08-12 16:47:12

發現它，這是因爲成員鏈接將自己定義爲活動並從#nav a：active繼承，它以某種方式覆蓋了#nav> li> ul> li a：link規則。謝謝您的幫助 – 2010-08-12 16:59:12

沒有#nav> li> ul> li a：已定義訪問或活動規則。成員鏈接正在從#nav a：active中取得信息，因此顯示不正確。

將#nav> li> ul> li a：鏈接到#nav> li> ul> li a：link，#nav> li> ul> li a：visited，#nav> li> ul> li a ：主動修正了這個問題

來源

2010-08-12 17:01:48

奇怪的CSS行爲

回答

相關問題