it-roy-ru.com

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;
}

не работает. Так, что происходит?

65
smogg

Вы можете (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).

254
thirtydot

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]-->
28
Niko

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

6
JonMack

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

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

5
Bojangles

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

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

2
c4urself

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;
}
0
omarjebari