IE9 CSS优先级...错误？ [英] IE9 CSS precedence... bug?

问题描述

我有两个CSS规则：

  .avo-lime-table th，
 .avo-lime- table td {
 background-color：gray; 
} 
  

第二项

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

在FireFox，Chrome，Opera和Safari中一切正常。显然Microsoft的浏览器（一如既往）有一些不同的想法，呈现我的页面...

 < div class =中心收缩> 
< form method =postaction =/ someformAction> 
< table class =avo-lime-table> 
< colgroup> 
< col> 
< col> 
< / colgroup> 
< thead> 
< tr>< th colspan =2class =avo-lime>在此登录表单标题< / th>< / tr& 
< / thead> 
< tfoot> 
< tr>< td colspan =2>在此提交按钮< / td> 
< / tr>< / tfoot> 
< tbody> 
< tr> 
< th class =avo-lime-h unselectablescope =row>登录：< / th> 
< td class =avo-light-h>登录输入此处< / td> 
< / tr> 
< / tbody> 
< / table> 
< / form> 
< / div> 
  

在上面的代码中，我跳过了几个不是importaint的示例。 p>

它应该如何显示（Firefox）：

它的外观（IE9）：

为什么第一个规则比第二个规则更具体（到IE）？

如何在IE中修复？我尝试过不同的事情：

  **。avo-lime，.avo-lime-table th.avo-lime * * {background-color：darkgreen; // fallback background color 
 //这里有一些渐变} 
  

但它不工作！

编辑：

好的，我不得不清除浏览器缓存两次，因为某种原因

因此， avo-lime-table th 的所有答案都比更具体。 avo-lime 是真的，并将其更改为 th.avo-lime 。

解决方案

对您的实际问题：

  filter：progid：dximagetransform.microsoft.gradient（enabled = false）; 
  

，它将在IE9中正常工作。

关于css规则优先级：

规则

  .avo-lime-table th 
  

p>

  .avo-lime 
  

，因为它包含一个类选择器和一个高于只有一个类选择器的元素选择器。

为了给予更高的优先级，将其改为

  th.avo-lime 
  

相同的特异性，但第二个规则通过简单的级联（稍后在样式表中声明的规则覆盖以前的规则）覆盖第一个规则。

阅读更多about a ：//www.vanseodesign.com/css/css-specificity-inheritance-cascaade/rel =nofollow> css selector specific 来了解这个复杂的问题。

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.

解决方案

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.

这篇关于IE9 CSS优先级...错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！