CSS псевдо-классы в Internet Explorer 8 - PullRequest
Новая
       24

CSS псевдо-классы в Internet Explorer 8

3 голосов
/ 27 сентября 2011

Это может относиться и к 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;
}

По какой-то причине этот CSS вообще не используется в IE8. Я понимаю, что nth-child не поддерживается в IE8, но first-child есть, и это также указано здесь, как правило. Какие-нибудь мысли? Что действительно удивительно, так это то, что правило не просто не применяется, оно просто не проявляется. Если вы посмотрите на представление Developer Tools на вкладке CSS, вы можете буквально прокрутить все это и не увидеть ни одного из этих правил. Очень запутанно.

Ответы [ 2 ]

8 голосов
/ 27 сентября 2011

Кажется, вы не поняли, как работает синтаксический анализ. IE8 видит селектор вида something_invalid, something_valid, что означает, что он должен игнорировать весь селектор и не применять свойства. Я приведу еще один пример - представьте, что вы указываете селектор типа div, p:foo-bar { /* properties */ }. Даже если селектор div полностью допустим, объявление отбрасывается из-за нераспознанного псевдокласса foo-bar. Браузеры всегда проверяют, действителен ли селектор whole ; нет ничего особенного при использовании запятой в селекторе.

Решение простое - просто удалите часть селекторов nth-child; Ваша запись с first-child будет соответствовать желаемым элементам во всех браузерах.

0 голосов
/ 27 сентября 2011

попробуйте a.menu-item.home-menu:hover * вместо a.menu-item.home-menu:hover > *:first-child + *

...