IE9 CSS优先...错误？(IE9 CSS precedence… bug?)

我有两个CSS规则：

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

法则二

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

一切都在火狐，Chrome，Opera和Safari浏览器工作正常。 显然，微软的浏览器（一如既往）有大约渲染我的网页一些不同势的想法...

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

在上面的代码中，我跳过一些的未importaint这个例子。

应该怎么看（火狐）：

它的外观（IE9）：

为什么第一条规则比第二个更具体的（IE浏览器）？

我该如何解决，在IE浏览器？ 我试过不同势的事情：

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

但它不工作！

编辑：

OK，看来我必须清除浏览器缓存两次，becouse由于某种原因，没有在第一时间更新后的CSS文件。

因此，所有的答案是AVO钙表个更具体的比.avo石灰是真实的，和量变到质变它th.avo石灰做的伎俩。

我会给大家一个+1和马克回答第一个正确的答案。

Answer 1:

您的实际问题：删除

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

它会在IE9中工作得很好。

关于CSS规则的优先级：

规则

.avo-lime-table th

优先级高于

.avo-lime

因为它含有类选择和元素选择比只有一个类选择更高。 这一点不仅适用于IE浏览器，但在所有其他的浏览器了。

为了给它一个更高的优先级变化

th.avo-lime

现在，这两个规则具有相同的特异性，但第二条规则通过简单级联（后来的规则在样式表声明覆盖前面的）覆盖的第一条规则

了解更多关于CSS选择器的特异性理解这个复杂的问题。

Answer 2:

也有一些是不完全正确你的问题。

该CSS规则：

.avo-lime { ...

需要是

th.avo-lime { ...

如果你想让它优先于其他规则。 但是，这是在Firefox的情况了。

这里是的jsfiddle例如 ，你可以删除前导th从th.avo-lime看到这在Firefox。

Answer 3:

你似乎被禁用梯度，然后不知道为什么它没有呈现出梯度。

如果不是的话，那么答案是因为.avo-lime-table td比更具体.avo-lime等优先。

Answer 4:

我想，我的电脑

只是删除filter: progid:dximagetransform.microsoft.gradient(enabled=false);

，由于其覆盖一属性filter: progid:dximagetransform.microsoft.gradient(startColorstr='#46ae0e', endColorstr='#a5e54b', GradientType=0);

Answer 5:

需要注意的是你与你做什么background-image规则没有设置背景图片取决于浏览器，但现在每一个background-image的行覆盖前面定义的一个。 背景除了IE浏览器的每一个作品的原因是其他浏览器。

为了确保ms-规则适用于IE浏览器，你应该添加

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

一个CSS文件或<style>这样一个后加载，只有当IE浏览器的客户端与服务器端脚本语言的帮助或与条件注释（注意帮助浏览器加载标签：听说后者不会被支持了从IE10开始）。

文章来源: IE9 CSS precedence… bug?