IE8: nth-child и: before - PullRequest
Новая
       52

IE8: nth-child и: before

65 голосов
/ 13 декабря 2011

Вот мой CSS: 

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

Работает сейчас везде (используется this на моем сайте), кроме 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;
}

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

Ответы [ 6 ]

254 голосов
/ 13 декабря 2011

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

28 голосов
/ 25 января 2013

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]-->
6 голосов
/ 13 декабря 2011

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

5 голосов
/ 13 декабря 2011

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

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

2 голосов
/ 13 декабря 2011

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

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

0 голосов
/ 12 ноября 2013

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