css - tesis - IE8: nth-child y: antes

tesis implementacion de una biblioteca virtual pdf

Question

Aquí está mi CSS:

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

Funciona en todas partes ahora (lo usé en mi sitio web) excepto Internet Explorer 8 ...

¿Hay posiblemente una forma de usar nth-child en IE8? Esta es la peor versión de este navegador ... nada funciona como debería y no puedo encontrar la manera de solucionarlo.

@edit: versión simplificada de lo que quiero lograr: http://jsfiddle.net/LvvNL/ . Es solo un comienzo. CSS será más complicado, así que tengo que ser capaz de apuntar a cada uno de estos enlaces. Espero que agregar clases a cada enlace no sea la única manera

@ edit2: Acabo de notar que

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

¡ES de hecho trabajando en IE8! Pero esto:

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

no está trabajando. ¿Entonces qué está pasando?

Answer 1

IE8 (y más abajo) no admite :nth-child() , pero admite :after . Sin embargo, debido a que está usando :nth-child() before :after en su selector, IE8 no lo ejecutará.

Podría usar una solución de JavaScript agregando una clase a esa fila, o una biblioteca que agregue soporte para estos selectores.

Answer 2

Intente NMWatcher Selectivizr con NMWatcher . Eso es lo que hago en todos mis sitios para obtener un buen soporte de pseudo selector en todos los navegadores. FWIW si está usando muchos elementos HTML5, entonces podría valer la pena usar v 1.2.3 de NMWatcher en lugar de 1.2.4, tuve un problema de selectivizr con un sitio hoy que no parecía poder solucionar, luego me mudé a 1.2.3 y funcionó bien.

Answer 3

Puede (ab) usar el combinador de hermanos adyacente ( + ) para lograr esto con CSS que funciona en IE7 / 8.

Ver: 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;
}​

No puede emular variaciones más complejas de :nth-child() como :nth-child(odd) o :nth-child(4n+3) con este método.

Answer 4

Puedes usar: first-child en lugar de: nth-child (1) esto tiene mejor soporte en IE7 +

Ver también http://quirksmode.org/css/firstchild.html

Answer 5

ie9.js suena como la mejor solución, pero también podría agregar una clase a las celdas, por ejemplo

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

Answer 6

this resuelve este y otros problemas relacionados!

:nth-child(odd) y :nth-child(even) trabajan con esto.

Uso:

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