Menu icon Foundation
Foundation 5 and IE8

Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 with it. So I've had a bit of a play!

The 2 main issues seem to be IE8's lack of media query support, and also lack of support for rem units in CSS.

I've managed to overcome both with a few simple polyfills!

To fix the media query issue, just add this to your head:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
            

         

Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag: https://github.com/chuckcarpenter/REM-unit-polyfill

(Note: there is currently a bug in the REM polyfill that seems to stop it working on an element if a property the element includes the !important rule, in the following screenshots I've just removed !important from .button in foundation.css, until the bug can be fixed)

FOUNDATION 5 IN IE8 BEFORE:

Screen shot 2013 11 22 at 16.13.47

FOUNDATION 5 IN IE8 AFTER:

Screen shot 2013 11 22 at 16.14.41

Not bad eh?!

Now, that's just the CSS side working, I doubt it will be as simple to get any of the Foundation 5 JavaScript working as it relies on jQuery 2.0 which is IE9+. But hopefully that will help out some people to get things looking better on IE8.

ie8Foundation 5usage

Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 with it. So I've had a bit of a play!

The 2 main issues seem to be IE8's lack of media query support, and also lack of support for rem units in CSS.

I've managed to overcome both with a few simple polyfills!

To fix the media query issue, just add this to your head:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
            

         

Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag: https://github.com/chuckcarpenter/REM-unit-polyfill

(Note: there is currently a bug in the REM polyfill that seems to stop it working on an element if a property the element includes the !important rule, in the following screenshots I've just removed !important from .button in foundation.css, until the bug can be fixed)

FOUNDATION 5 IN IE8 BEFORE:

Screen shot 2013 11 22 at 16.13.47

FOUNDATION 5 IN IE8 AFTER:

Screen shot 2013 11 22 at 16.14.41

Not bad eh?!

Now, that's just the CSS side working, I doubt it will be as simple to get any of the Foundation 5 JavaScript working as it relies on jQuery 2.0 which is IE9+. But hopefully that will help out some people to get things looking better on IE8.

Jordan Humphreys almost 4 years ago

We are using some ECMAScript 5 features, like "Function.prototype.bind", that are not supported in IE8 for foundation 5. You could, however, use a polyfil to add support.

Daniel Koskinen almost 4 years ago

Hey, thanks for this! I noticed the .button bug myself, didn't realise it was related to !important. In general using !important anywhere except in state changes is bad, is it really necessary here?

James, that's an awful lot of polyfills you have there for media query support. I seemed to get it to work just with https://code.google.com/p/css3-mediaqueries-js/ and the HTML5shiv. Did you try this or is there something I'm missing?

James Cocker almost 4 years ago

Hi Daniel, see this Stack Overflow for an explanation of the polyfills used. http://stackoverflow.com/questions/16720043/how-do-you-use-mobile-first-with-in-ie8 I think you're correct that they're not all just for media queries.

Nick Lane almost 4 years ago

Hi James,

I've attempted to use this on a test Foundation 5 page locally, downloading the latest JS file from your REM polyfill repo.

After applying the conditional and links within the head, and applying script link to a local download of your REM file, it seems I'm running into rendering issues. The first time the page loads, all is well in IE8. However, with any page refresh or reload of the same page, its as if the page is choking on a memory issue? Just curious if you were experiencing the same.

I'm using the sample HTML file provided in the base Foundation download, 5.0.2, and the JavaScript file from your latest master branch.

James Cocker almost 4 years ago

Hi Nick,

Interesting, while I should admit I haven't heavily tested the above methods, I've not been able to reproduce your issues. Perhaps try removing each polyfill one at a time to see if a particular one is causing it?

James Craine almost 4 years ago

Thanks for this post - this will come in handy. Would you place those polyfils in the Head or before the closing body?

Is there any 'magic' library that can make Foundation's JS run in IE? Not sure where to start with that one and I really need to build for IE sadly.

James Craine almost 4 years ago

In response to Jordan's post about finding a polyfill to handle Ecmascript 5, to get Foundation JS working - I tried to use an ES5-Shim: https://github.com/kriskowal/es5-shim/

I couldn't seem to get this to work - although I could very well be doing something wrong. Has anyone had any success with getting the F5 Javascript to work in IE8?

I do realise it's a bit ridiculous at this point trying to polyfill everything - but I'm just looking for an interim solution until our company drops IE support in April next year. Would be nice to be able to work with F5 up until then, and still have the so-so IE8 support to keep clients quiet.

Trevor West almost 4 years ago

I have to support IE8 and 7 also I am just going to do something simple like this with PHP

function foundationVersion() {
preg_match('/MSIE (.*?);/', $_SERVER['HTTP_USER_AGENT'], $matches);
if (count($matches) > 1) {
$foundation = ($matches[1] <= 8) ? 4 : 5;
} else {
$foundation = 5;
}
return $foundation;
}

I will load foundation 4 and 5 depending on the browser. The syntax of 4 and 5 is almost identical and shouldn't be too hard to just switch the javascript/css files around.

Matthew Trow almost 4 years ago

Watching this thread with interest!

The only thing that's held me off using Foundation is lack of ie8 support (in 4 and now 5).

It's always irked me, as a great deal of modern developers who create websites to earn their bread & butter have to support internet explorer 8 ... so if we do require a framework, or parts thereof, we tend to head on over to Bootstrap.

Regarding ie8 being 'almost dead', unfortunately, no, it's not. Not unless you consider MacOs Safari 'dead' too.

Right now, it's around the 10% mark. That value is just too high for commercial web developers to safely ignore.

It's a real shame, Foundation 5 is clearly excellent and built with sass, what's not to like?

Maybe in another year, or perhaps this thread and others will assist an interim approach until it actually does make sense to drop ie8 support from our development support - right now, it doesn't.

Kareem Davies almost 4 years ago

To add an approach that works for me, building on Trevor's solution, here's my approach.

```
var ie = !(navigator.userAgent.indexOf("MSIE 8.0") < 0);
if (ie == false) {
document.write("");
document.write("");
} else {
//Load JQuery 1.9 & Foundation 4 JS for IE 8
document.write("");
document.write("");
}

Paul @ cactusoft almost 4 years ago

We've found the easiest solution until IE8 disappears is to detect browser server side, and then serve a more conventional 'skin' that is not based on Foundation at all to IE8 and earlier hold outs.

Of course that older skin is not responsive, but nobody on IE8 or earlier is going to be on a tablet or mobile so it really doesn't matter. Things don't need to be perfect for IE8 or earlier, they just need to be usable.

Kareem Davies almost 4 years ago

Sorry people, the JS snippet from my code got stripped out.

Basically, if it isnt IE8 or below. Load JQuery 2 and Foundation 5 minified JS (or whatever Foundation JS you want)

If not. Load JQuery 1.9 and Foundation 4's minified JS ( or whatever Foundation 4 JS you want)

I've been using that for a project, and so far, everything seems to be working quite well in IE8.

James Craine almost 4 years ago

I don't suppose you can utilise the medium grid with that method?

abslayer almost 4 years ago

This seems to work great but the off canvas menu is popping out of the screen. Anyone has any solution to this?

Corl DeLuna almost 4 years ago

Hi James Cocker,

I was stunned when I learned that F4-5 didn't support IE8 with 10-20% market share. I've experienced this before when devs were too future focused and don't provide a safe fall back like this guy did http://www.jonikorpi.com/leaving-old-IE-behind/. But your solution seems to fix IE8. Thank you very much for sharing your solution.

As for the rem.js, was their a particular !important I need to remove for .button not the throw an error? It got a little confusing after 5,000 + lines of css.

@Mark Joseph Lape mentioned that the "canvas menu is popping out of the screen," Do you know if other JS functionality was lost?

Are all these polyfills required? I got it to render nicely with just respond.min.js and rem.js, but maybe I lost some functionality in the process?

@Nick Lane, Re local testing: Yes I got the same results, until I remembered that IE doesn't trust local files, but gladly accepts candy from strangers, so I hosted it on my server and it all rendered fast and fine in Browser Mode IE8.

@Foundation Devs, Thank you all for all your hard work and generosity in sharing Foundation.

With all due respect: are you so sure that IE8 will disappear 4-2014? XP has many more users besides institutions, apparently a shocking 32% of the world runs XP, and many people are happy enough not buying a new computer for a new OS and starting all over again. Sure that fits MS and Intel's business model, but... Plus, I hear that IE8 shipped with Win 7 too, that's another 50% globally, and MS won't stop supporting it until 2020.

Kalyan almost 4 years ago

Hi James,

Can you help me with what all shims/pollyfills I need to run the Foundation5 JavaScript to play nicely in IE8. It will be really helpful. Please help

James Craine almost 4 years ago

Bump. I'd really like to know this too.

Linda Brennan almost 4 years ago

This was very helpful for someone like me who's a newbie to Foundation and responsive web design - thank you! I'm building a site locally and will be moving it into a content management system where I have no ability to upload JavaScript files. I definitely have to support IE8. Is there a hosted version of the REM polyfill that I could use instead of downloading it, similar to the way I would reference the jQuery library?

Mehrdad R almost 4 years ago

I am confused.

I have used your sample and recommended scripts but I still have problem in IE 8

also in this URL : http://foundation.zurb.com/forum/posts/260-ie8-doesnt-support-foundation-5-stylesheet there is a sample.

I exactly copied and paste it but the problems still exist and a lot of javascript error happened.

Can you make a sample of this bug fixing and upload it on www. I want to check your sample via my Internet Explorer.

Thanks a lot.

Paul Pettengill over 3 years ago

I'm getting an Object expected error at line 222 of the foundation.js when I execute in IE8.

See the code below, line 222 is the second return statement from foundation.js

      init_lib : function (lib, args) {
      if (this.libs.hasOwnProperty(lib)) {
        this.patch(this.libs[lib]);

        if (args && args.hasOwnProperty(lib)) {
          return this.libs[lib].init.apply(this.libs[lib], [this.scope, args[lib]]);
        }

        return this.libs[lib].init.apply(this.libs[lib], args);
      }

      return function () {};
    },