IE9 CSS优先级...... bug？

Question

我有两个CSS规则：

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

规则二

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

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

在上面的代码中，我跳过了一些对于这个例子不重要的内容。

应该如何看待（Firefox）：

外观（IE9）：

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

如何在IE中解决这个问题？我尝试了不同的东西：

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

但它不起作用！

编辑：

好吧，似乎我不得不两次清除浏览器缓存，因为某些原因它在第一次之后没有更新CSS文件。

所有 avo-lime-table th 的答案都比 .avo-lime 更具体，并将其更改为 th.avo-lime 做了这个伎俩。

我要给每个人+1，并且标记回答了第一个正确答案。

Answer 1

解决您的实际问题：删除

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

它在IE9中运行得很好。

关于css规则优先级：

规则

.avo-lime-table th

的优先级高于

.avo-lime

因为它包含一个类选择器和一个高于一个类选择器的元素选择器。这不仅适用于IE，也适用于所有其他浏览器。

要赋予它更高的优先级，请将其更改为

th.avo-lime

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

详细了解css selector specificity以了解这一复杂问题。

Answer 2

你的问题有些不对劲。

css规则：

.avo-lime { ...

需要

th.avo-lime { ...

如果您希望它优先于其他规则。但是Firefox也是如此。

以下JSFiddle example您可以从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是客户端浏览器时借助您的服务器端脚本语言或在条件注释的帮助下加载它（注意：I听说从IE10开始不再支持后者了。