How to fix CSS so that it works in IE7 and IE8?

Question

I am using below styles to display alternative colors dynamically from my HTML code, but these styles are not working in IE7 and IE8. Its all working from IE9 above. I came to know these styles not compatible for IE7 & 8.

Can you please show alternative methods in CSS so that they work in IE7 and above?

table.idclass tbody tr:nth-child(2n) td {
    background-color: red;
}

table.idclass tbody tr:nth-child(2n+1) td {
    background-color: blue;
}

table.idclass thead tr th:not(.innerclassid) after {
    content: "\25C0\25C0";
}

http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element — CoderPi, Dec 05 '15 at 15:10
Your `after` in the last selector should be `:after`. Modern browsers use `::after`, but the single-colon is preferred for backwards compatibility. — Sampson, Dec 08 '15 at 19:01

score 0 · Answer 1 · answered Dec 05 '15 at 15:39

This should help you http://codepen.io/anon/pen/PZoBYa We basically manipulate things by js. The idea is to loop through the elements add bg/class by checking if the child is even or odd. For after, js is helpless so we create a class with 'after' and add them

elem = $('div');

for(i=0;i<elem.length;i++){
    bg = (i%2 == 0) ? 'red' : 'blue';
    $(elem[i]).css('background',bg);
    if(!$(elem[i]).hasClass('inner'))           
        $(elem[i]).addClass('afterContent');
}

score 0 · Answer 2 · answered Dec 05 '15 at 22:25

Neither Neither :nth-child nor :not work in either IE8 or IE7.

In most cases where you're using these selectors, if you need to support IE7/IE8, you would simply rewrite your HTML so that everything that you need to select with these selectors has a class or an ID that you can select directly. For example, add odd and even classes to table rows. That's usually the most sensible solution.

If you absolutely can't rewrite the HTML, then the next best option is to use a polyfill script. The best one to use is Selectivzr. Add this script (along with JQuery if you don't have it already), and it will add support for these selectors to old IE versions. This script does generally work pretty well; however it may have performance implications for your site, and there are quirks, so for example, beware of trying to use the selectors n HTML that is dynamic and gets updated by JavaScript. Be sure to test thoroughly.

Another option is "graceful fallback". As long as your CSS has sensible default values when these selectors don't work, it may not even matter. For example, if you use :nth-child to highlight alternate rows in a table, does it really matter if IE8 users see all the rows the same colour? Just make sure that the defaults are sensible, and that should be sufficient.

Finally, stop and ask yourself again whether you really need to support IE7 and IE8. These IE versions are very old now and have very low usage rates. Before you do any work, consider the number of users it will affect, and whether it's worth making the effort to do the work required.

How to fix CSS so that it works in IE7 and IE8?

2 Answers2