Как получить нечетные / четные цвета для IE и Firefox, используя только CSS?

Question

Я использую php для своего веб-проекта, но мне нужно это цветовое дополнение только с помощью CSS.

Таким образом, мне нужен код, который работает в Firefox и Internet Explorer.но не работает в Internet Explorer:

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

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

Answer 1

Более низкие версии IE не будут поддерживать псевдо-выбор.

Вы можете использовать jQuery, чтобы он работал:

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

В CSS просто:

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

Answer 2

Псевдо-селектор :nth-child поддерживается новейшей версией всех основных браузеров (IE 9+, FF 3.5+).Если вам требуется поддержка более старых браузеров (например, IE 8-), вы можете вручную присвоить class="odd", class="even" вашим столбцам или использовать JQuery:

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

Переименовать .tbl_css col:nth-child(odd).odd.Переименуйте .tbl_css col:nth-child(even) в .even.

Answer 3

Какую версию IE вы тестируете?

Селектор nth-child был добавлен только в IE в IE9. Предыдущая версия (IE8 и более ранние) не поддерживает ее.

Если вам нужно добиться этого эффекта в более старых версиях IE, вам нужно будет использовать альтернативную технику. Наиболее распространенным является простой вывод вашего HTML с чередующимися классами в элементах <tr>. Есть также плагины JQuery, которые могут достичь этого эффекта для вас.

Надеюсь, это поможет.