CSS table alternate row doesn't paint in Explorer but works in Mozilla, Chrome and Opera

When I put in css file lines

.properties_table tr:nth-child(even) {background: #CCC;}
.properties_table tr:nth-child(odd) {background: #FFF;}

in Mozilla, Opera and Chrome it looks fine but th开发者_如何学Cere it doesn't show in Explorer 8 ( I tested only on IE 8 ). Need to look like this

but looks like this

Does anyone have suggestion ?

nth-child is not supported by IE8: http://caniuse.com/#search=nth-child

Try defining odd and even classes instead and applying the given style to them in your css.

nth-child() is not supported in IE8 unfortunately.

If you can use jQuery, the alternate rows can be coloured using the jQuery :nth-child() selector to colour the rows in JavaScript instead of native CSS.

Unless IE8 is your majority target browser, or you really want coloured rows for all browsers, I would adopt a progressive enhancement strategy. Allow browsers that do support :nth-child to colour the rows and leave older browsers with no solution. I suspect the page is still perfectly readable without the colouring and it is considerably less effort to implement workarounds or alternate solutions for all CSS-lacking browsers.

IE 8 doesn't support this selector. You're going to have to add something like an "odd" and "even" class on every other row, and use a selector like:

.properties_table tr.odd {background:#ccc;}

or you'll have to use script to add the class, but that could cause a flash of unstyled content, and/or slow down the page.

My personal preference is to not code for the old browsers if it's just a question of styling, but IE8 is a bit too new to ignore -- people with Windows XP will never know a better version of IE. This is why we hate IE.

the nth-children property isn't compatible with any IE version (till 8.0, don't know about 9) you may check something in javascript-jquery to change the background property

IE8 doesn't support CSS3 selectors, only IE9 and still to a limited degree,

You can use a javascript backup for IE versions 8 and below.

The litmus test will tell you what you need to know about compatibility with each browser:

http://findmebyip.com/litmus/

Another option would be to use a specific class like .even and .odd and style appropriately...

.properties_table tr.even {background: #CCC;}
.properties_table tr.odd {background: #FFF;}

This is also a great resource:

http://kimblim.dk/css-tests/selectors/