Why does this not work in IE8?

Question

I've got to compare my website in both Firefox and IE8. There is one difference that I just can't understand why it's doing it.

I believe that the problem is because of this line of code

 ul.dropdown > li:last-child {width: 50px;}

Does anyone know why this may not be working? Does IE8 not like angle brackets/ :last-child in CSS

IE and Firefox are a little poopy with CSS in the first place, last-child is only supported in above IE9. — Ilan Kleiman, Mar 02 '14 at 20:22
Maybe this link can help you out: http://css-plus.com/2011/03/prevent-last-child-from-slowing-you-down/ — service-paradis, Mar 02 '14 at 20:33

score 3 · Answer 1 · answered Mar 02 '14 at 20:22

3

:last-child is only supported in IE >=9

answered Mar 02 '14 at 20:22

j08691

204,283
31
260
272

1

+1 from me. this is the correct answer. – avrahamcool Mar 02 '14 at 20:23

score 0 · Answer 2 · answered Mar 02 '14 at 20:28

The last-child selector is not available in IE8 and earlier versions.

You can, however, support these early browsers with a little jQuery magic:

$("ul.dropdown li:last-child").addClass("last-child");

and then in css you can do this:

ul.dropdown li.last-child,
ul.dropdown li:last-child {
    /* Your CSS styling here */
}

Just know that the styling will only apply after jQuery gets a chance to apply the class to the last child. It is good practice to use this technique with the original selector.

For more info on the last-child selector, you can visit this useful page:

http://www.w3schools.com/cssref/sel_last-child.asp

score 0 · Answer 3 · answered Mar 02 '14 at 20:30

0

As far as I know children aren't supported in IE8 and below. COULD be wrong.

Easy fix would just be

<li class="last">List Item</li>

.last {width: 50px;}

answered Mar 02 '14 at 20:30

Nick

2,261
5
33
65

Why does this not work in IE8?

3 Answers3