Question

I am performing some testing on IE8 and I am finding that my media queries are not being picked up by the browser. In the example below, the .telephone class is always being picked up as the second class declaration and not the first one, with the margin-bottom.

I can’t see what the reason for this would be as the site that my site is based on works correctly on IE8.

I know the window is definitely larger than 640px.

<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/style.css" />   
<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/index.css" />           

@media only screen and (min-width:640px) {
    .telephone {
        padding-top:.75em;
            margin-bottom:.5em
    }
}

.telephone {
    display:block;
    font-size:1.5em;
    font-weight:normal;
    line-height:1;
    padding-top:.5em
}

Answer 1

Screen media queries based on screen width are a CSS3 feature that are supported starting at IE9. IE8 and below will not see them because they do not support the feature. caniuse reference for media queries.

You would need to use a JavaScript polyfill, such as Respond.js, or if you are using jQuery, you can write your own function that would act similarly. If not using jQuery, I believe you can do the same with normal JavaScript using a similar function where window.onload and window.onresize would be used instead of $(window).load() and $(window).resize(), and use window.innerWidth instead of $(window).width().