:last-child in IE 8

[jarcoal]

I'm trying to fix some IE8 compatibility issues on my site, and this one has caused me some trouble.

Here's what I have:

<style>
   .item {
      float: left;
      width: xyz;
      margin-right: 15px;
   }
   .item:last-child {
      /* To allow far right box to sit snug against right side of .row */
      margin-right: 0px;
   }
</style>

<div class="row">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
</div>

Obviously IE 6/7 ignore the last-child, but at least I can use CSS expressions to compensate (yes I know they're bad news). IE 8 has these expressions turned off in standards rendering mode.

Has anyone found a solution that...
-Doesn't require any JS (again, I know expressions are JS)
-Doesn't require the server side code to append an additional class to an item at the end of the row.
...?

Also, are there any known plans from MS to support this pseudo selector and some of the others from CSS3 in the future?

Thanks

[Jeff Mott]

The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

<meta http-equiv="X-UA-Compatible" content="IE=7">

This will tell IE8 to behave as if it were IE7. And since your site already works in IE7, you should be good to go right away.

[drhowarddrfine]

Also, are there any known plans from MS to support this pseudo selector and some of the others from CSS3 in the future?

Microsoft does not have that attribute, and much of css3, in its plans for IE8.

[jarcoal]

The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

<meta http-equiv="X-UA-Compatible" content="IE=7">

This will tell IE8 to behave as if it were IE7. And since your site already works in IE7, you should be good to go right away.

Yes this is the solution that seems most practical for the time being. I hope I won't have to use it for long though.

[jarcoal]

Microsoft does not have that attribute, and much of css3, in its plans for IE8.

Looks like :last-child is firmly in the red. Shame, it's a useful pseudo class.

Perhaps I will switch to "margin-left" and use :first-child to remove the margin for the initial item in the row. This seems to be well supported.

[Jeff Mott]

I hope I won't have to use it [the META tag] for long though.

Personally, I intend to use it until IE6 and IE7 are long gone and no longer need to be supported. Because until that happens, IE8 -- no matter how much of an improvement it may be -- won't save us any time or work. Even if IE8 fixes the hasLayout nonsense, we'll still have to test for and fix the same weird bugs because our pages must still work in IE6 & 7. Even if IE8 adds some useful CSS selectors, we still won't be able to rely on them, and we'll still have to figure out workarounds. IE8 won't be of any practical benefit to developers for many years yet.

[konajunction]

I have found a good way to work around last-child if you know how many elements you are working with. first-child works cross browser so just use :first-child + element (add as many as you need to target the specific element.
This has saved me countless times.