css - whatwg - html spec

¿Cómo hacer que Internet Explorer 8 sea compatible con el elemento nth child() CSS?

Question

Quiero dar un efecto de franja de cebra a mis filas de la mesa. En todos los otros navegadores se puede hacer usando CSS nth elemento hijo. Pero quiero hacerlo IE 8 también. Entonces, ¿cómo puedo hacerlo?

Answer 1

Como alternativa a Selectivizr, puede usar un poco jQuery:

$(''.your-list li:nth-child(3n+1)'').addClass(''nth-child-3np1'');

Luego solo agrega un segundo selector en tu CSS:

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}

Answer 2

Con polyfill: http://selectivizr.com/ es lo suficientemente bueno.

Sin polyfill: como IE8 admite first-child, puede engañar esto para que sea compatible con nth-child en iE8, es decir,

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

Aunque no podemos emular selectores complejos, es decir, nth-child (2n + 1) o nth-child (impar) para IE8.

Answer 3

Los selectores ''primer hijo'' y ''+'' están disponibles en IE7, y ''+'' es aditivo.

Por lo tanto, ''nth-child'' se puede simular sumando sucesivamente ''+'' selectores, por lo tanto:

tr:nth-child(4)

se convierte en:

tr:first-child + tr + tr + tr

Si todos los elementos hermanos son iguales, entonces el comodín ''*'' será suficiente, como en:

tr:first-child + * + * + *

lo que reducirá el tamaño del archivo css si se especifican muchas filas.

Tenga en cuenta que los espacios entre los selectores no son necesarios, por lo que el tamaño del archivo se puede reducir aún más al dejarlos fuera, por lo que para seleccionar la primera, tercera y quinta filas:

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

Por supuesto, uno no querría atender mesas muy grandes.

Si usa * como relleno, asegúrese de que el elemento :first-child y el último elemento tengan el nombre de etiqueta explícito, porque la regla se probará contra cada elemento en el DOM, y especificar ambos elementos obliga explícitamente al fracaso en cualquiera de los dos Al final, un navegador en particular aplica sus reglas primero, en lugar de fallar después de haber tenido que pasar por varios elementos en cada secuencia para eventualmente fallar la regla para cada uno de ellos. ¡No hagas que tu navegador funcione sin una buena razón!

Answer 4

Puede usar http://selectivizr.com/ JS que admite el selector css3 para IE.