How to get IE to be Responsive? Selectivizr?

Question

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

IE8 does not support HTML5 and also no mediaqueries (`@media ..`). You have to find a workaround for that. — putvande, Aug 06 '13 at 15:13
I've tried it in previous versions of HTML and nothing there either. Are there any good examples of workarounds? Respond.js for example? — pee2pee, Aug 06 '13 at 15:17
You don't need responsive layout in ie8. The point of responsive layout is to support mobile devices. No mobile devices run IE8. Therefore no point wasting time on it. If most of your users are on IE8 then run a separate stylesheet for it. — Ollie, Aug 06 '13 at 15:19
How about people with really low scvreen resolutions vs the ones with really high resolutions? How about IE7? — pee2pee, Aug 06 '13 at 15:24
If you are building a site for old technology, Then try using old methods. Don't build the site bigger than 1024px x 768. — Ollie, Aug 06 '13 at 15:34

score 2 · Accepted Answer · answered Aug 07 '13 at 14:55

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.

How to get IE to be Responsive? Selectivizr?

1 Answers1