Internet Explorer 8 中的 CSS 伪类

Posted 2023-03-06

【中文标题】Internet Explorer 8 中的 CSS 伪类

【英文标题】：CSS pseudo classes in Internet Explorer 8

【发布时间】：2011-11-25 13:00:59

【问题描述】：

这可能也适用于 IE7，不过我不确定。我有以下 CSS：

div#sidebar-right a.menu-item img:nth-child(1),
div#sidebar-right a.menu-item > *:first-child 
    position: relative;
    left: 11px;
    top: 37px;
    z-index: 10;
    opacity: 0;

    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);

    -webkit-transition-property: top, opacity, -webkit-transform;
    -webkit-transition-duration: 0.2s, 0.3s, 0.5s;
    -webkit-transition-timing-function: linear, linear, ease-in;

    -moz-transition-property: top, opacity, -moz-transform;
    -moz-transition-duration: 0.2s, 0.3s, 0.5s;
    -moz-transition-timing-function: linear, linear, ease-in;


div#sidebar-right a.menu-item:hover img:nth-child(1),
div#sidebar-right a.menu-item:hover > *:first-child 
    top: -6px;
    opacity: 1;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);


div#sidebar-right a.menu-item img:nth-child(2),
div#sidebar-right a.menu-item > *:first-child + * 
    position: relative;
    z-index: 11;
    top: -63px;


div#sidebar-right a.menu-item.home-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.home-menu:hover > *:first-child + * 
    top: -100px;


div#sidebar-right a.menu-item.code-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.code-menu:hover > *:first-child + * 
    top: -97px;


div#sidebar-right a.menu-item.game-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.game-menu:hover > *:first-child + * 
    top: -101px;


div#sidebar-right a.menu-item.sports-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.sports-menu:hover > *:first-child + * 
    top: -98px;


div#sidebar-right a.menu-item.the-nation-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.the-nation-menu:hover > *:first-child + * 
    top: -98px;

由于某种原因，IE8 中根本没有使用这个 CSS。我知道 IE8 不支持 nth-child，但 first-child 支持，并且这里也将其列为规则。有什么想法吗？真正令人费解的是，该规则不仅没有被应用，而且只是没有出现。如果您查看 CSS 选项卡下的 Developer Tools 视图，您可以逐字滚动浏览整个内容，但看不到其中的任何规则。非常混乱。

【问题讨论】：

:nth-child() 和 :first-child 是伪类，而不是伪元素。 IE7 不支持任何 CSS2 伪元素，但它支持一些 CSS2 伪类，例如 :first-child。这是一个微妙但重要的区别:)

感谢语法分析。我实际上知道这一点，但在写这个主题时只是放屁。

【参考方案1】：

您似乎误解了选择器解析的工作原理。 IE8 看到something_invalid, something_valid 形式的选择器，这意味着它应该忽略整个选择器并且不应用属性。我再举一个例子——假设你指定了 div, p:foo-bar /* properties */ 这样的选择器。即使div 选择器完全有效，声明也会因为无法识别的伪类foo-bar 而被丢弃。浏览器总是检查 entire 选择器是否有效；在选择器中使用逗号没有什么特别的。

解决方案很简单——只需删除选择器的nth-child 部分即可；您的 first-child 符号将匹配所有浏览器中所需的元素。

【讨论】：

+1 很棒的答案。我从来没有意识到这一点。对于像我这样的菜鸟来说，这是一个很好的教训，也是一个非常容易陷入的陷阱。谢谢老兄。

【参考方案2】：

尝试a.menu-item.home-menu:hover * 而不是a.menu-item.home-menu:hover > *:first-child + *

【讨论】：

忘记提及你需要使用过滤器的不透明度：和-ms-filter

那么将 * 更改为 img 怎么样？ (...:hover > img + img)

我故意将过滤器排除在外。在 Chrome 和 Firefox 中，菜单项在悬停时执行动画，但由于动画在 IE 中是一种皇家痛苦，我只是省略了动画部分。 opacity 元素只是动画所必需的，所以我省略了它。