IE8: nth-ребенок и: до

вот мой CSS:

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

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

- это возможно, есть способ, чтобы использовать n-го ребенка в 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;
}

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

6 65
css internet-explorer-8 css-selectors

6 ответов:

вы можете (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

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

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

6

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

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

5

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

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

2

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