Internet Explorer 8中的CSS伪类

这也可能适用于IE7，但我不确定。我有以下CSS：Internet Explorer 8中的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; 
}

由于某种原因，这个CSS在IE8中没有被拾取。我知道IE8中不支持第n个孩子，但是第一个孩子在这里也被列为规则。有什么想法吗？真令人费解的是，这条规则不仅没有被应用，反而只是没有出现。如果您查看CSS选项卡下的开发人员工具视图，则可以逐字滚动浏览整个内容，而不会看到其中的任何规则。很混乱。

来源

2011-09-26 Lester Peabody

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

感谢您的语法分析。我实际上知道这一点，但只是在写这个主题的时候头脑放松。 –

看来你误会了如何选择解析工作。 IE8看到选择器形式something_invalid, something_valid这意味着它应该忽略整个选择器，而不是应用属性。我会给你另一个例子 - 想像你指定选择器，如div, p:foo-bar { /* properties */ }。即使div选择器是完全有效的，由于无法识别的伪类foo-bar，该声明也会丢失。浏览器总是检查整个选择器是否有效;在选择器中使用逗号时没有什么特别之处。

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

来源

2011-09-26 20:57:57 duri

+1奇妙的答案。我从未意识到这一点。对于像我这样的新手来说，这是一个很好的教训，也是一个非常容易的陷阱。谢了哥们。 –

尝试a.menu-item.home-menu:hover *代替

来源

2011-09-26 20:49:47 simoncereska

仍然不会显示作为一项规则。 –

忘记提及不透明度，您需要使用过滤器：和-ms-filter – simoncereska

以及如何将*更改为img？（...：悬停> img + img） – simoncereska

Internet Explorer 8中的CSS伪类

回答

相关问题