0

Internet Explorerに問題があり、もちろん他のブラウザでも問題なく動作します。だから私はCSSクラスを持っています。左、中、右の部分がありますが、3つの異なる配色のフレームのようなものを作っています。したがって、9つの異なるクラスを作成したくないので、次の例のようにCSSパワーを使用します。

.container-header .left { /* Some styles here... */ }
.container-header .left.style1 { /* Some styles here... */ }
.container-header .left.style2 { /* Some styles here... */ }
.container-header .left.style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .middle.style1 { /* Some styles here... */ }
.container-header .middle.style2 { /* Some styles here... */ }
.container-header .middle.style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .right.style1 { /* Some styles here... */ }
.container-header .right.style2 { /* Some styles here... */ }
.container-header .right.style3 { /* Some styles here... */ }

すべてが完璧だったので、InternetExplorerを開きました。私のHTMLには、次のような単純な構造があります。

<div class="container-header">
    <div class="left style1"></div>
    <div class="middle style1"></div>
    <div class="right style1"></div>
</div>

問題は、IEが独自の意見を持っており、コードの最後の要素の前にあるすべてのCSSスタイルをスキップすることです。つまり、左側のstyle1と中央のstyle1は、右側のstyle1スタイルでレンダリングされています。IEにこの前のスタイルを読み取らせ、スキップしないようにする方法がわかりません。誰かが彼の意見を書いてくれたらとても嬉しいです。ありがとう ：）

PP：英語が下手でごめんなさい。:(

4

1 に答える 1

7

ページはおそらくクァークズモードになっているため、標準モードでレンダリングするには、ページにDoctype宣言を追加する必要があります。

IEのQuirksモードには、クラスセレクターのチェーンの最後のクラスのみを読み取るバグがあるため、ルールは次のように扱われます。

.container-header .left { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

これは、標準モードのIE6にも影響します。このモードの唯一の回避策は、HTML要素に一意のクラスを割り当てることです。説明については、この回答も参照してください。

ちなみに、これは継承エラーではなく、カスケードエラー（つまり、セレクターの解析エラーが原因でカスケードが正しくない）です。

于 2012-09-24T16:15:24.923 に答える