Search code examples
jqueryinternet-explorerresponsive-designselectivizr

How to get IE to be Responsive? Selectivizr?

The start of my page is as follows

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Database Reports</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script src="js/selectivizr-min.js"></script>
    <![endif]-->
</head>

Then within the body I have several DIVs

<div class="left"></div>
...
<div class="left"></div>

My CSS is as follows

.left {
    width: 30%;
    float: left;
    margin: 5px;
}

.left:nth-child(4) {
        clear: both;
}

@media screen and (max-width: 1024px) {
    .left {
        width: 40%;
    }

    .left:nth-child(4) {
        clear: none;
    }

    .left:nth-child(3) {
        clear: both;
    }
}

@media screen and (max-width: 800px) {
    .left {
        width: 80%;
    }

    .left:nth-child(4), .left:nth-child(3) {
        clear: none;
    }

    .left:nth-child(2) {
        clear: both;
    }
}

In Firefox and Chrome, it all works well. In full resolution, there are 3 columns and then a break, 3 columns and then a break etc

When browser resized (smaller) there are 2 columns, a break 2 columns, a break etc.

I have IE8 and if I turn off compatiablity mode, there are 3 columns and then a break (as describe above) but when I resize the browser, nothing happens. It always stays at 3 columns.

When i put compatiablity mode back on (most users in the company will have this) or use IE7, there's no breaking occuring or any responsiveness.

Any advice/help would be greatly appreciated

Solution

  • Versions of Internet Explorer prior to IE9 do not support media queries, so any CSS that is inside of a media query will not work in IE7 or IE8.

    If you'd like IE6, IE7, and/or IE8 to understand the styles within your media queries, Respond.js is a possible solution.

    The pros and cons of using a polyfill to make older, desktop-only browsers understand something that they do not natively support is debatable, which is why an earlier comment suggested using a separate stylesheet that specifically targets the browsers that you want to support. To do this, you would (obviously) create a separate stylesheet - perhaps something like no-mq.css and then use (conditional comments)[http://www.quirksmode.org/css/condcom.html] to target IE.

    <!--[if (lt IE 9) & (!IEMobile)]>
  <link rel="stylesheet" href="no-mq.css" />
<![endif]-->

    The separate stylesheet approach would allow you to do something like provide a "fixed-width" experience for older versions of IE, while letting the capable versions get the responsive experience.

    Additionally, your usage of :nth-child will also not work in IE7 and IE8 without some kind of help from a polyfill (I presume this is why you're including Selectivizr. Please be aware that in some cases, Selectivizr can be a performance hit, so test your site's performance wisely if you use Selectivizr.