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僞類

回答

相關問題