Why isn't :nth-child working in IE9?

Question

According to this page, :nth-child should work in IE9, and I have tried it before and it worked fine, but on this page, it does not appear to be working. View the page in Chrome to see the intended behavior, and in IE, you'll see that it does not work. You can probably see this with a web inspector, but for your reference, the relevant lines of CSS are;

.ad_widget:nth-child(3n+2) { background: #efefef; }
.ad_mrow {background: #efefef;}`

I'm at a loss. Any ideas?

Answer 1

For some reason I cannot fathom, IE9 defaults to compatibility mode for looking at intranet sites, or an HTML page stored as a file on a PC. Compatibility mode means 'render stuff like a dumb old browser'. This means that when you're designing stuff for a website and you try to preview from your favourite IDE in IE9, none of the CSS3 stuff works. You have to click on Tools ->' compatibility view settings' in the IE9 menu and then unclick the pesky checkbox that says 'display interanet sites in compatibility view'. From then on the wretched browser works like any sane browser such as Safari. Why did they do it? Heaven only knows, but it has taken me ages to discover this simple fix due to the fact that I kept blaming my code.

Answer 2

They look the same here. You sure you're not in compatibility mode?

Answer 3

My version of IE9 was locked into IE8 rendering mode, which wasn't applying the following selector:

 .parentClass > div:nth-child(n+2) .childClass

Here is where you can find the options to change it: