IE 7と8がスタイルシートの一部をロードできない（またはおそらく正しくカスケードする）

Question

私は奇妙な問題があります。IE 7と8は自分のスタイルシートの約80％をロードせず、それ以上ロードしないでください。 IEの開発ツールは、アンロードされたプロパティを認識しますが、ブラウザには適用されません。次のスタイルシートはすべて正しく読み込まれ、他のブラウザに問題がありません。さらに、ほぼ90％近い生産量のHTMLサイトは問題ありません。

このサイトはWordpressでローカルにビルドされていますが、ホームページhereのソースをアップロードしました。そのヘルプ（正しくロードされないスタイルシートは '760.css'です）を参考にしてください。さらに、（正しく動作する）プロトタイプはhereと表示されますが、そのバージョンとWordpressへの変換の間にいくつかの変更が加えられています。

問題のスタイルシートは、（ULの＃メニュー-サイトのナビゲーションプロパティが適用された後のロードを停止するようだ）：

/* 
Created by Mikey Clarke | @mikey_clarke 
*/
 

#nav-bar { 
    font-size: 0.95em; 
    padding: 0px 0px; 
    } 

#nav-bar ul { 
    text-align: left; 
    } 

    ul#menu-site-nav { 
     width: 95%; 
     margin: 0 auto; 
     } 

    #nav-bar li.primary-nav { 
     width: 14.584%; 
     padding: 20px 1.042%; 
     float: left; 
     text-transform: uppercase; 
     } 

     #nav-bar li.primary-nav:first-child { 
      display: block; 
      padding-left: 1.042%; 
      } 

     #nav-bar li.primary-nav:nth-child(2) { 
      padding-left: 1.042%; /* restore outer padding */ 
      } 

     #nav-bar li.primary-nav:last-child { 
      padding-right: 1.042%; /* restore outer padding */ 
      } 

      #nav-bar li ul { 
       display: block; 
       width: 100%; 
       text-transform: capitalize; 
       } 

       #nav-bar li ul li { 
        float: none; 
        padding: 0px 0px; 
        display: list-item; 
        } 

    #nav-bar li.shield-logo { 
     background: url(/wp-content/themes/itsa/images/shield.png) no-repeat; 
     background-size: 25px; 
     background-position: 10px 23px; 
     } 

     #nav-bar .shield-logo span { 
      text-indent: 1000%; 
      white-space: nowrap; 
      overflow: hidden; 
      display: block; 
      padding-bottom: 12px; 
      } 

#masthead { 
    font-size: 2.25em; 
    padding: 35px 0; 
    } 

    #masthead a { 
     display: block; 
     padding: 0 160px; 
     } 

#content { 
    width: 82.279%; 
    padding-right: 1.042%; 
    float: left; 
    } 

.sidebar { 
    width: 14.586%; 
    float: left; 
    text-align: right; 
    padding: 0px 1.042% 20px 1.042%; 
    background: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    border: none; 
    } 

#section-nav>ul>li>span { 
    padding: 4px 4%; 
    border: 1px solid transparent; 
    margin-bottom: 4px; 
    } 

    #section-nav li ul li { 
     padding: 4px 4%; 
     margin: 4px 0px; 
     border: 1px solid transparent; 
     } 

    #section-nav>ul>li.current-menu-item>span, 
    #section-nav>ul>li>ul>li.current-menu-item { 
     -webkit-border-radius: 8px; 
     -moz-border-radius: 8px; 
     border-radius: 8px; 
     border: 1px solid #f6f6f6; 
     -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3); 
     -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3); 
     box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3); 
     background-color: #ececec; 
     background: rgba(0,0,0,0.02); 
     } 

#breadcrumbs { 
    font-size: 0.9em; 
    } 

/* Restore content only useful for users browsing from desktops */ 
.mobile-superfluous { 
    display: block; 
    } 

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
     only screen and (-o-min-device-pixel-ratio: 3/2), 
     only screen and (min--moz-device-pixel-ratio: 1.5), 
     only screen and (min-device-pixel-ratio: 1.5) { 
    #nav-bar li.shield-logo { 
     background: url(/wp-content/themes/itsa/images/shield@2.png) no-repeat; 
     background-size: 25px; 
     } 
    } 

Answer 1

をお読みくださいすべての行の後にテストすると、問題は最後にメディアクエリにあるように見えます。私はメディアクエリのすべての部分を個別に削除し、IEのどの部分が窒息しているのかを完全に特定できません。私はまた、メディアのクエリをコピーして別のスタイルシートに貼り付けました。そのスタイルシートはIE 7でうまくロードされます& 8.とても奇妙です。

メディアクエリがなくても動作するので、別のスタイルシートに移動して正常に動作します。

Answer 2

あなたの問題はあなたがいくつかのCSS擬似セレクターという事実であると思われますこれらのブラウザではサポートされていません（:nth-childと:last-child）。

そして、それは彼らがスペースなしで使用直接の子セレクタに問題があるかもしれない私を動作するはずですしながら、おそらく#section-nav > ul > li

はIE7とIという心を行いますする必要がありますすなわちsection-nav>ul>li（これは単なる推測はるかフェッチではありません） 8も同様にrgbaをサポートしていないと考えてください。任意の後続の解析エラーまたは不足しているスタイル

は多分、これに起因する可能性が...

IE7 +がサポートする必要がある正確なスペックの詳細については、手で全体のスタイルシートを書き換えた後this excellent article about CSS2.1 selectors