IE8: nth-child и: before

Вот мой CSS:

#nav-primary ul li:nth-child(1) a:after { }

Работает повсюду сейчас (используется это на моем сайте), кроме Internet Explorer 8...

Возможно ли использовать nth-child в IE8? Это худшая версия этого браузера... ничего не работает, как должно, и я не могу найти способ его исправить.

@edit: Упрощенная версия того, чего я хочу достичь: http://jsfiddle.net/LvvNL/. Это просто начало. CSS будет более сложным, поэтому мне нужно будет прицелиться в каждую из этих ссылок. Надежда добавления классов в каждую ссылку не является единственным способом

@edit2: Я только что заметил, что

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

Я действительно работаю в IE8! Но это:

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

НЕ работает. Итак, что происходит?

Ответы

Ответ 1

Вы можете (ab) использовать смежный сиблятор (+), чтобы достичь этого с помощью CSS, который работает в IE7/8.

Смотрите: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

Вы не можете эмулировать более сложные варианты :nth-child(), такие как :nth-child(odd) или :nth-child(4n+3) с помощью этого метода.

Ответ 2

IE9.js решает эту и другие связанные с этим проблемы!

:nth-child(odd) и :nth-child(even) работают с этим.

Использование:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Ответ 3

Попробуйте установить Selectivizr с NMWatcher, Это то, что я делаю на всех моих сайтах, чтобы получить хорошую поддержку псевдоселектора во всех браузерах. FWIW, если вы используете много элементов HTML5, тогда, возможно, стоит использовать v 1.2.3 NMWatcher, а не 1.2.4, у меня была проблема selectivizr с сайтом сегодня, который я, похоже, не мог исправить, тогда я переехал до 1.2.3, и он работал нормально.

Ответ 4

IE8 (и ниже) не поддерживает :nth-child(), но поддерживает :after. Однако, поскольку вы используете :nth-child() до :after в своем селекторе, IE8 не запускает его.

Вы можете использовать решение JavaScript, добавив класс в эту строку или библиотеку, которая добавит поддержку этих селекторов.

Ответ 5

Вы можете использовать: first-child вместо: nth-child (1), это имеет лучшую поддержку в IE7 +

См. также http://quirksmode.org/css/firstchild.html

Ответ 6

ie9.js звучит как лучшее решение, но вы также можете просто добавить класс в ячейки, например

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}