IE8 CSS 更高特异性选择器被忽略答案

【问题标题】：IE8 CSS higher specificity selector being ignoredIE8 CSS 更高特异性选择器被忽略
【发布时间】：2013-02-16 01:16:58
【问题描述】：

我遇到了一个 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：2013 年 2 月 15 日 我现在认为这可能与 response.js 在 IE8 中没有正确加载有关 - 看起来其他媒体查询在 IE8 中没有启动 - 嗯......

【问题讨论】：

您有额外的带有“tf_prodthumb_inner”的结束锚标记，这可能会导致问题。
@BillyMoat 刚刚发现了这个问题 - 感谢您指出它 - 但不要认为它解决了 IE8 问题
@Mr.Alien 不确定你的意思？
他的意思是规则告诉它是 30.5% 是在规则告诉它是 48% 之后出现的吗？
在您的样式表中，您似乎首先声明了 48% 的宽度，但在 (min-width: 768px) 的媒体查询中声明了 30.5% 的宽度。如果是这种情况，那么 IE 的行为是正确的，而 Firefox 是错误的，但我不知道为什么。

【解决方案1】：

尝试在类前面添加标签。喜欢div.tfshop ul.products li.product

【讨论】：

【解决方案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/ 可能有助于以更简单的方式处理它。

【讨论】：