CSS - 在IE中僅繼承父類的子孫

我遇到了Internet Explorer問題。我很想舉起手來說我不想支持它，但這不是一種選擇。基本上，我寫了一個無序列表用於導航。然後在另一節中，使用另一個父節點，我使用了另一個無序列表，但它繼承了另一個ID的屬性。它在所有其他瀏覽器中都可以正常工作。我刪除了頁面的主要部分，並在下面發佈它們。另外，我檢查了w3c css驗證器，並且我得到的警告說「在兩種情況下，顏色和背景顏色相同#container和#stripes ul a：link」。CSS - 在IE中僅繼承父類的子孫

你會看到，如果你點擊項目符號列表，他們會像導航一樣。但是，當我嘗試更改項目符號列表時，它會影響導航！我嘗試設置maincontent中的所有屬性，但是它會關閉所有內容。

有人可以檢查了這一點，並幫助？這種類型駕駛着我！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>2012 Summer Blood Challenge</title> 
<style type="text/css"> 

#stripes ul 
{ font-size:13px; 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 

} 
#stripes li 
{ 
float:left; 
} 
#stripes ul a:link,a:visited 
{ 
display:block; 
width:128px; 
font-weight:bold; 
color:#FFFFFF; background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/redbar.jpg); 
background-position: bottom; 
text-align:center; 
padding:4px; 
text-decoration:none; 
height:32px; 
} 
#stripes ul a:hover,a:active 
{ 
background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/darkredbar.jpg); 
} 

.roundside { 
    background-image: url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/goldboxes_02.jpg); 
    background-repeat: repeat-y; 
    width: 560px; 
    text-align: left; 
    padding: 0 30px 0 30px; 
} 

.roundside ul {list-style-type: none; 
    margin: 0; 
    padding: 0;} 

.roundside li {background-image:url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/drop.gif); 

    background-repeat:no-repeat; 
    padding:0 0 5px 16px; font-size:16px;} 

.roundside ul a:link,a:visited,a:hover,a:active {color:#990000; font-weight:bold} 


</style> 
</head> 
<body class="oneColFixCtrHdr"> 
<div id="largecontainer"><!--set centering--> 
     <div id="container"><!--creates box--> 
      <div id="stripes"> 

      <center> 
      <ul> 
       <li><a href="#">Promotional Materials</a></li> 
       <li><a href="#" style="font-size:11px">Participating Employers and Results</a></li> 
       <li><a href="#">Newsletters</a></li> 
       <li><a href="#">Give Blood</a></li> 
       <li><a href="#">Become a Member</a></li> 
      </ul> 
      </center> 

      </div><!--end stripes--> 
      <div id="mainContent"> 
        <div class="roundside"> 
        <ul> 
         <li><a href="#">Official Rules and Point Structure</a></li> 
         <li><a href="#">Gage Flyer 8.5x11</a></li> 
         <li><a href="#">2012 SBC Hero Card</a></li> 
        </ul> 
       </div> 
      </div> <!-- end #mainContent --> 
      <div id="footer">&nbsp; 
      </div><!-- end #footer --> 
     </div><!--end container--> 
    </div><!-- end #largecontainer --> 
</body> 
</html>

來源

2012-05-07 Kelly Smith

的原因，你的第二ul內.roundside正在加快從#stripes ul的CSS是因爲下面的CSS的

#stripes ul a:link,a:visited

你需要將其更改爲

#stripes ul a:link, #stripes ul a:visited

否則將在其後面聲明的樣式應用於網站上的每個a:visited，而不僅僅是在#stripes ul

這也是#stripes ul a:hover,a:active它需要更改爲#stripes ul a:hover, #stripes ul a:hover a:active的情況，否則您會遇到同樣的問題。

希望這可以解決您的問題。

編輯：MrSlayer在下面的評論中提出了一個很好的觀點，我錯過了。

也將更好改變

.roundside ul a:link,a:visited,a:hover,a:active {color:#990000; font-weight:bold}

到

.roundside ul a:link, .roundside ul a:visited, .roundside ul a:hover, .roundside ul a:active {color:#990000; font-weight:bold}

，以避免在未來的任何討厭a相關的驚喜。在CSS中，您需要儘可能具體地設置樣式

來源

2012-05-07 18:01:54 frontendzzzguy

'.roundside ul a：link，a：visited，a：hover，a：active}'也應該寫成'.roundside ul a：link， .roundside ul a：visited，.roundside a：hover，.roundside a：active' – Quantastical

太棒了，完全有效，謝謝！我沒有意識到我必須是那個特定的。 –

CSS - 在IE中僅繼承父類的子孫

回答

相關問題