IE8 CSS較高的特異性選擇被忽略

以下選擇器在Chrome/Firefox的等正確應用。人。

.tfshop-3 ul.products li.product { 
    width: 30.5% !important; 
}

但是在IE8中它完全被忽略。上面的選擇器是另一個選擇器的覆蓋：

ul.products li.product { 
    float: left; 
    margin: 0 0 20px; 
    position: relative; 
    width: 48%; 
}

任何人都知道爲什麼IE8忽略了更具體的選擇器？

更新1：15/02/13 我現在認爲這可能給respond.js不是在IE8正確加載有關 - 它看起來像其他媒體查詢未在IE8踢 - 嗯...

2013-02-15 Ed Bloom

你有額外的閉鎖定位標籤和「tf_prodthumb_inner」，這可能會導致一個問題。 – 2013-02-15 16:01:57

試着把它放在！ – 2013-02-15 16:05:14

@BillyMoat剛剛發現了這個問題 - 感謝您指出 - 不認爲它解決了IE8問題，儘管 – 2013-02-15 16:14:02

嘗試在類的前面添加標籤。像div.tfshop ul.products li.product

2013-02-15 16:02:50 idlehands23

感謝您的建議 - 我只是試過，並沒有對IE8問題 – 2013-02-15 16:06:24

@media only screen and (min-width: 768px) { 
    ... 
    div.tfshop-3 ul.products li.product { 
    width: 30.5% !important; 
} 
    ... 
}

你定義成不支持IE8 @media條件查詢這些風格和較低的http://caniuse.com/css-mediaqueries

這是http://wicky.nillia.ms/enquire.js/或許可以幫助更簡單的方法來對付它。

2013-02-15 16:10:54 dmi3y

感謝您的答案dmi3y但我正在使用Respond。js它確實在IE8中啓用媒體查詢 – 2013-02-15 16:57:42

是的，可能它起了作用，因爲如果你刪除媒體查詢一切都開始奇蹟般地工作;） – dmi3y 2013-02-15 17:02:33

但我需要選擇器呈現該媒體查詢中不同的寬度:) – 2013-02-15 17:07:59

回答