What happens when you tell two siblings to play nice together and share? Sometimes they listen and other times they fight. As a parent, I experience this with my own kids, but only one time have I ever experienced this in the browser landscape. Take the following example:
td { border-left: 1px solid #CCC; }
td:first-child,
td:last-child { border-left: none; }
IE7 correctly removes the border from the first table cell in each row, and doesn’t do anything with the last table cell (because it’s not supported). But in IE8 it’s a different story. Here, the two selectors fight it out like siblings! To illustrate, td:last-child basically says to td:first-child, “I know we’re supposed to share here, but I don’t want to share! Since I can’t use this, I’m going to take it from you so you can’t use it either.” Well, not really, but in technical terms, the entire declaration block gets discarded by IE8 when :first-child and :last-child are grouped together. To get this selector grouping to not cause problems in IE8, you have to separate the selectors into two different rules:
td:first-child { border-left: none; }
td:last-child { border-left: none; }
This will allow IE8 to correctly apply the style to the first table cell and do nothing with the last one.
I know, :last-child isn’t even supported in IE8 yet. Despite this shortcoming, I’ve decided to start using it anyway since I figured out a way to make it work in IE (more on that in another post). But this obscure bug in IE8 only makes me realize that testing in IE, even in the latest version with seemingly much better CSS support, is still a very important part of the front-end development process.
