IE8 CSS higher specificity selector being ignored

I’ve got an IE8 specificity problem which is driving me nuts:

The following selector is applied correctly in Chrome/Firefox et. al.

.tfshop-3 ul.products li.product {
    width: 30.5% !important;

But in IE8 it is completely ignored. The selector above is an override of another selector:

ul.products li.product {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 48%;

Anyone know why IE8 is ignoring the more specific selector?


The rule is inside a media query and IE8 doesn’t support media queries. You can try respond.js as a polyfill to add media query support to IE8.

Hey Paul, I haven’t been in here in a while - great to see you’re still helping folks out - you helped me out an awful lot about 7 or 8 years ago now! I was using respond.js as a polyfill but it turns out it wasn’t kicking in at all for some reason - I eventually moved from @import to <link> statements and respond.js finally kicked in and all was well.



Glad you got it sorted. I thought the name was familiar:)