IE9 CSS precedence… bug?

问题:

I have two CSS rules:

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

Rule two

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

Everything works fine in FireFox, Chrome, Opera and Safari. Obviously Microsoft's browser (as always) has some diffrent ideas about rendering my page...

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

In above code I've skipped a few 's that are not importaint for this example.

How it should look (Firefox):

How it looks (IE9):

Why is the first rule more specific (to IE) than the second one?

How can I fix that in IE? I've tried diffrent things:

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

but It does not work!

EDIT:

OK, it seems that I had to clear browser cache twice, becouse for some reason it did not update CSS file after the first time.

So all answers that avo-lime-table th is more specific than .avo-lime were true, and changeing it to th.avo-lime did the trick.

I'm gonna give everyone a +1 and mark answered the first correct answer.

回答1:

To your actual problem: remove

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

and it will work just fine in IE9.

About the css-rule precedence:

The rule

.avo-lime-table th

has higher precedence than

.avo-lime

because it contains a class selector and an element selector which is higher than only one class selector. This is not only true for IE but in all other browser too.

To give it a higher precedence change it to

th.avo-lime

Now both rules have the same specificity, but the second rule overrides the first rule by simple cascading (rules declared later in the stylesheet override previous ones)

Read more about css selector specificity to understand this complicated matter.

回答2:

There is something not quite right about your question.

The css rule:

.avo-lime { ...

Needs to be

th.avo-lime { ...

If you want it to take precedence over the other rule. But this is the case in Firefox too.

Here is the JSFiddle example you can remove the leading th from th.avo-lime to see this in Firefox.

回答3:

You appear to be disabling the gradient, then wondering why it's not showing a gradient.

If that's not the case, then the answer is because .avo-lime-table td is more specific than .avo-lime, and so takes precedence.

回答4:

I tried that on my PC

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

that because its override previous property filter: progid:dximagetransform.microsoft.gradient(startColorstr='#46ae0e', endColorstr='#a5e54b', GradientType=0);

回答5:

Note that what you are doing with your background-image rules is not setting the background image depending on the browser, but each now background-image row overwrites the one defined previously. The reason the background works in every browser except IE is that the other browsers.

To make sure the ms- rule applies in IE, you should add

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

to a css file or <style> tag that loads after this one and load it only when IE is the client's browser with the help of your server-side script language or with the help of conditional comments (note: I heard the latter will not be supported anymore starting from IE10).