我有兩個CSS規則：IE9 CSS優先... bug？

.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這個例子。

應該怎麼看（火狐）：

How it should look (Firefox)

它的外觀（IE9）：

How it looks (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，標記回答了第一個正確的答案。

來源

2012-07-12 loostro

您是否嘗試過使用！重要？ – 2012-07-12 12:22:42

@AshwinSingh停止提出這樣的廢話。 @ loostro請張貼您的CSS。最喜歡你的代碼有錯誤。 – Christoph 2012-07-12 12:28:15

@Christoph添加完整的css – loostro 2012-07-12 12:34:25

您的實際問題：刪除

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

，它會在IE9中工作得很好。

關於CSS的規則的優先級：

規則

.avo-lime-table th

具有比

.avo-lime

更高的優先級，因爲它包含一個類選擇和元素選擇器，其是高比只有一個類選擇器。這不僅適用於IE瀏覽器，還適用於所有其他瀏覽器。

給它一個更高的優先級改變它

th.avo-lime

現在，這兩個規則具有相同的特異性，但第二條規則通過簡單級聯（規則後面的樣式表聲明覆蓋前面的）覆蓋的第一條規則

閱讀更多關於css selector specificity瞭解這一複雜的事情。

來源

2012-07-12 12:38:16 Christoph

我沒有嘗試th.avo-lime - 沒有任何改變 – loostro 2012-07-12 12:56:10

更新：它似乎我的瀏覽器緩存沒有正確清除，我不得不手動做 - 第二次你的解決方案（th。AVO石灰）的工作，THX – loostro 2012-07-12 13:40:07

對於你的問題有些不太正確的。

的CSS規則：

.avo-lime { ...

需要是

th.avo-lime { ...

如果你想讓它優先於其他規則。但Firefox也是如此。

這是JSFiddle example你可以從th.avo-lime中刪除前導th以在Firefox中查看此內容。

來源

2012-07-12 12:36:56 Fenton

.avo-lime，th.avo-lime {and here rules}不會改變任何東西 – loostro 2012-07-12 13:26:04

更新：看起來我的瀏覽器緩存沒有正確清除，我不得不手動執行 - 第二次解決方案（th.avo-石灰）工作，thx – loostro 2012-07-12 13:40:16

您似乎禁用漸變，然後想知道爲什麼它不顯示漸變。

如果不是這樣，那麼答案是因爲.avo-lime-table td比.avo-lime更具體，所以優先。

來源

2012-07-12 12:39:38

更新：看來我的瀏覽器緩存中沒有正確清楚的，我不得不做手工 - 第二次，清除緩存解決方案（th.avo石灰）的工作，THX不 – loostro 2012-07-12 13:40:38

我想，在我的電腦上

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

，由於其覆蓋以前的屬性filter: progid:dximagetransform.microsoft.gradient(startColorstr='#46ae0e', endColorstr='#a5e54b', GradientType=0);

來源

2012-07-12 12:42:41

多數民衆贊成在後問題，在.avo石灰的規則並不適用becouse .avo鈣表個優先 – loostro 2012-07-12 13:00:16

@loostro嘗試，首先，它與我的工作:)但要注意意志爲您啓用阻止的內容。 – 2012-07-12 13:03:31

@loostro，會問你*（修爲我以前的評論），所以能夠阻止的內容。 – 2012-07-12 13:13:14

注意，你與你的background-image規則做不設置取決於背景圖片瀏覽器，但現在每個行都覆蓋以前定義的行。除了IE以外，每個瀏覽器都可以使用其他瀏覽器。

爲了確保ms-規則適用於IE瀏覽器，你應該添加

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

這一個後加載一個CSS文件或<style>標籤並加載它，只有當IE瀏覽器是客戶的幫助下瀏覽器你的服務器端腳本語言或在條件註釋的幫助下（注：我聽說後者將不再受IE10支持）。

來源

2012-07-12 12:52:46

我的CSS是基於Twitter的引導的按鈕CSS https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L2590 – loostro 2012-07-12 13:01:06

IE9 CSS優先... bug？

爲什麼第一條規則更具體的（IE瀏覽器），比第二個？

編輯：

回答

相關問題