Jak uzyskać dziwne/równomierne kolory w IE i Firefox za pomocą samego CSS?

Question

Używam php do mojego projektu internetowego, ale potrzebuję tego uzupełnienia kolorowania samym CSS.

Potrzebuję więc kodu, który działa w przeglądarce Firefox i przeglądarce internetowej.

Ten kod jest napisane, ale nie działa w Internet Explorer:

.tbl_css col:nth-child(odd){  
} 

.tbl_css col:nth-child(even){  
} 

Answer 1

Niższe wersje IE nie obsługują pseudo-wyboru.

Można użyć jQuery aby to działało:

$(document).ready(function(){ 
    $('table tr:even').addClass('even'); 
    $('table tr:odd').addClass('odd'); 
}); 

W CSS prosto:

.even{ /* your styles */ } 
.odd { /* your styles */ } 

Answer 2

Jaka wersja IE ty testowania z?

Selektor nth-child został dodany do IE tylko w IE9. Poprzednia wersja (IE8 i wcześniejsze) nie obsługuje tego.

Jeśli chcesz osiągnąć ten efekt w starszych wersjach IE, musisz użyć innej techniki. Najpopularniejszy jest po prostu wyprowadzanie kodu HTML z naprzemiennymi klasami w elementach <tr>. Istnieją również wtyczki JQuery, które mogą osiągnąć ten efekt.

Nadzieję, że pomaga.

Answer 3

Pseudo-selektor :nth-child jest obsługiwany przez najnowszą wersję wszystkich głównych przeglądarek (IE 9+, FF 3.5+). Jeśli masz do obsługi starszych przeglądarek (IE 8-, na przykład), można ręcznie przypisać class="odd", class="even" do swoich kolumn, lub użyć jQuery:

$(".tbl_css col:nth-child(2n+1)").addClass("odd"); 
$(".tbl_css col:nth-child(2n)").addClass("even"); 

Rename .tbl_css col:nth-child(odd) do .odd.
Zmień nazwę .tbl_css col:nth-child(even) na .even.