1

我有两个 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>

在上面的代码中，我跳过了一些对于这个例子来说并不重要的 's 。

它应该看起来如何（Firefox）：

它应该看起来如何（Firefox）

它的外观（IE9）：

外观 (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 并标记回答第一个正确答案。

4

5 回答 5

3

对于您的实际问题：删除

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

它会在 IE9 中正常工作。

关于 css-rule 优先级：

规则

.avo-lime-table th

优先级高于

.avo-lime

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

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

th.avo-lime

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

阅读有关css 选择器特异性的更多信息以了解这个复杂的问题。

于 2012-07-12T12:38:16.300 回答
2

你的问题有些地方不太对劲。

CSS规则：

.avo-lime { ...

需要是

th.avo-lime { ...

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

这是JSFiddle 示例th，您可以从中删除前导th.avo-lime以在 Firefox 中查看。

于 2012-07-12T12:36:56.243 回答
2

您似乎正在禁用渐变，然后想知道为什么它没有显示渐变。

如果不是这样，那么答案是因为.avo-lime-table td比 更具体.avo-lime，所以优先。

于 2012-07-12T12:39:38.157 回答
1

我在我的电脑上试过

只需删除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 回答