IE8 y jQuery selectores

Question

Hoy me llamó la atención que una combinación de selectores jQuery y la función addClass() no funciona correctamente en IE8.

Por ejemplo, cuando quiero para asegurarse de que las filas de número par se seleccionan en una mesa, me escribió:

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").addClass("even"); 
} 

Y para el CSS, escribí:

#table1 tr:nth-child(even), #table1 tr.even { 
    background-color: #ff0; 
} 

En Firefox , Chrome, Safari y Opera, incluso sin el selector de pseudoclases en el archivo CSS, se seleccionan las filas pares. Sin embargo, en IE8, no es el caso. Las filas no tienen un color de fondo diferente.

Esto es raro porque cuando utilicé:

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"}); 
} 

Las filas seleccionadas se resaltan en IE8.

---

Un ejemplo del problema es la pregunta se puede ver aquí - 24ways example. En Firefox, Chrome, Safari y Opera, a las filas impares se les asigna una clase "impar". Sin embargo, en IE8, no se les asigna una clase "impar" y no se resaltan.

Answer 1

El selector funciona correctamente en el lado de jQuery ... pero IE8 descarta la regla de estilo por completo (de acuerdo con the specification), ya que no reconoce nth-child:

tr:nth-child(odd) td, tr.odd td { 
    background-color: #86B486; 
} 

Si se divide, es' ll trabajo correctamente:

tr:nth-child(odd) td { 
    background-color: #86B486; 
} 
tr.odd td { 
    background-color: #86B486; 
} 

Here's the original version (una sola regla elimina IE8) y here's a fixed sample, con la división regla.

---

Para completarlo, revirtiendo la regla like thisno lo hace ayuda:

tr.odd td, tr:nth-child(odd) td { 
    background-color: #86B486; 
} 

Answer 2

esto funciona para mí en IE8 e IE9 primero que hay 2 clases con el color de fondo

.even { background-color: white; } 
.odd { background-color: #ff0; } 

luego con jquery buscar tr: impar agregar tr: par y agregar la clase correspondiente

$(document).ready(function() { 
     $('#table1').find('tr:odd').addClass("odd"); 
     $('#table1').find('tr:even').addClass("even"); 
});