internetexplorer8-IE8CSS更高特异性选择器被忽略

Question

我遇到了一个IE8特定问题，这让我抓狂：http://proffetdemo.themesforge.com/shop/

以下选择器在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我现在认为这可能与responsed.js没有在IE8中正确加载有关-看起来其他媒体查询没有在IE8-嗯…

Answer 1

尝试在类前面添加标记。如div.tfshop ul.products li.product

Answer 2

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

您在@media条件查询中定义了这些样式，IE8及更低版本不支持这些样式http://caniuse.com/css-mediaqueries

这就是http://wicky.nillia.ms/enquire.js/可能有助于以更简单的方式处理它。