CSS - IEで異なる親から継承したGrandchildクラス

Internet Explorerに問題があります。私は私の手を投げて、私はそれをサポートしたくないと言いたいですが、それはオプションではありません。基本的には、ナビゲーションに使用する順番のないリストを書きました。次に、別の親を使用する別のセクションでは、別の順序付けられていないリストを使用しましたが、別のIDからプロパティを継承しています。それは他のすべてのブラウザで完全に正常に動作します。私はページの重要な部分を取り除き、下に投稿しています。さらに、私はw3c cssバリデーターをチェックしました。警告は "#containerと#stripes ul a：linkの2つのコンテキストで同じ色と背景色が使われています。CSS - IEで異なる親から継承したGrandchildクラス

箇条書きのリストをクリックすると、ナビゲーションのように表示されます。しかし、箇条書きのリストを変更しようとすると、ナビゲーションに影響します。私はメインコンテンツのすべての属性を設定しようとしましたが、すべてを停止します。

これをチェックして助けてもらえますか？それは私をひどく運転する種類です！

<!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

あなたは

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

にそれを変更する必要が.roundside内の2番目のulは#stripes ulからCSSを拾っている理由は次の理由CSS

#stripes ul a:link,a:visited

のものであり、それ以外の場合サイトのa:visitedにそれ以降に宣言されたスタイルを適用します。#stripes ul

#stripes ul a:hover,a:activeの場合も同様です。#stripes ul a:hover, #stripes ul a:hover a:activeに変更する必要があります。そうしないと同じ問題が発生します。

この方法で問題を解決できることを願います。

編集：MrSlayerは私が逃した以下のコメントに良い点を作った。

また、将来の任意の厄介なa関連驚きを避けるために

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

に

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

変えたほうが良いでしょう。 CSSでは、スタイルを設定するときにできるだけ具体的にする必要があります。

出典

2012-05-07 18:01:54 frontendzzzguy

'.roundside ul：link、a：visited、a：hover、a：active} 。around ul a：visited、。around：ホバー、around：active' – Quantastical

すごくうまくいって、ありがとう！私はそれが具体的でなければならないことに気付かなかった。 –

CSS - IEで異なる親から継承したGrandchildクラス

答えて

関連する問題