1

2 つの CSS ルールがあります。

.avo-lime-table th,
.avo-lime-table td {  
  background-color: grey;
}

ルール 2

.avo-lime {
  background-color: green; 
}

FireFox、Chrome、Opera、Safari ではすべて正常に動作します。明らかに、Microsoft のブラウザーには (いつものように) 私のページのレンダリングについていくつかの異なる考えがあります...

<div class="avo-center-shrink">
  <form method="post" action="/someformAction">
    <table class="avo-lime-table">
      <colgroup>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr><th colspan="2" class="avo-lime">Login form heading here</th></tr>
      </thead>
      <tfoot>
        <tr><td colspan="2">submit button here</td>
      </tr></tfoot>    
      <tbody>
        <tr>
          <th class="avo-lime-h unselectable" scope="row">Login:</th>
          <td class="avo-light-h">login input here</td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

上記のコードでは、この例では重要ではないいくつかの をスキップしました。

どのように見えるか (Firefox):

どのように見えるか (Firefox)

外観 (IE9):

外観 (IE9)

最初のルールが 2 番目のルールよりも (IE に) 限定的なのはなぜですか?

IEでそれを修正するにはどうすればよいですか？私はさまざまなことを試しました：

**.avo-lime, .avo-lime-table th.avo-lime** { background-color: darkgreen; // fallback background color
 //here some gradients }

しかし、うまくいきません！

編集：

OK、ブラウザのキャッシュを 2 回クリアする必要があったようです。何らかの理由で、最初の CSS ファイルが更新されなかったからです。

したがって、avo-lime-table thが.avo-limeよりも具体的であるというすべての回答は真実であり、それをth.avo-limeに変更するとうまくいきました。

全員に +1 を付けて、最初の正解にマークを付けます。

4

5 に答える 5

3

あなたの実際の問題に：削除

filter: progid:dximagetransform.microsoft.gradient(enabled=false);

IE9でも問題なく動作します。

css-ruleの優先順位について：

ルール

.avo-lime-table th

よりも優先順位が高い

.avo-lime

これは、クラスセレクターと、1つのクラスセレクターよりも上位の要素セレクターが含まれているためです。これはIEだけでなく、他のすべてのブラウザにも当てはまります。

優先順位を高くするには、次のように変更します。

th.avo-lime

これで、両方のルールの特異性は同じになりますが、2番目のルールは単純なカスケードによって最初のルールをオーバーライドします（スタイルシートの後半で宣言されたルールは前のルールをオーバーライドします）

この複雑な問題を理解するには、 cssセレクターの特異性について詳しく読んでください。

于 2012-07-12T12:38:16.300 に答える
2

あなたの質問には正しくないことがあります。

cssルール：

.avo-lime { ...

する必要があります

th.avo-lime { ...

他のルールよりも優先させたい場合。しかし、これはFirefoxにも当てはまります。

これは、Firefoxでこれを表示するために先頭を削除できるJSFiddleの例です。thth.avo-lime

于 2012-07-12T12:36:56.243 に答える
2

グラデーションを無効にしているように見えますが、なぜグラデーションが表示されないのか疑問に思っています。

そうでない場合、答えは、.avo-lime-table tdが よりも具体的であり.avo-lime、優先されるためです。

于 2012-07-12T12:39:38.157 に答える
1

PCでやってみた

取り除くだけfilter: progid:dximagetransform.microsoft.gradient(enabled=false);

それは、以前のプロパティをオーバーライドするためですfilter: progid:dximagetransform.microsoft.gradient(startColorstr='#46ae0e', endColorstr='#a5e54b', GradientType=0);

于 2012-07-12T12:42:41.910 に答える
0

ルールで行っているbackground-imageのは、ブラウザに応じて背景画像を設定することではありませんが、各行がbackground-image以前に定義された行を上書きすることに注意してください。IEを除くすべてのブラウザでバックグラウンドが機能する理由は、他のブラウザであるためです。

ms-ルールがIEに適用されることを確認するには、次を追加する必要があります

.avo-lime {
    background-image: -ms-linear-gradient(top, #46ae0e, #a5e54b 85%);
}

この後に読み込まれるcssファイルまたは<style>タグに、サーバー側スクリプト言語または条件付きコメントを使用してIEがクライアントのブラウザーである場合にのみ読み込む（注：後者はサポートされなくなると聞きました） IE10から開始）。

于 2012-07-12T12:52:46.043 に答える