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.

Dave over 5 years ago

I got Orbit working by changing that line to:

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

... basically remove args as the second parameter there. I haven't tested anything else but this is using jQuery 1+.

Matt Thompson over 5 years ago

James solution doesn't seem to work for me. I just downloaded the CSS (non Sass version) from http://foundation.zurb.com/develop/download.html

I've tried it in IE11's IE8 compatibility mode and another computer with IE8 natively installed. Any ideas?

James Cocker over 5 years ago

A quick follow up. Sorry, this forum really needs e-mail notifications for replies!

Regarding the polyfils, respond.js is the main one you need. It gives IE8 support for media queries so that Foundation can display the large desktop view in IE8 rather than just the small mobile view.

REM.js is also required to give IE8 support for reading rem units which Foundation uses throughout it's CSS. The !important bug seems to nearly be fixed: https://github.com/chuckcarpenter/REM-unit-polyfill/issues/29

For anyone asking about JavaScript, my main post was about getting the CSS to work in IE8. The Foundation 5 JavaScript will likely not work in IE8, and will cause errors, as it requires jQuery 2.0 which requires IE9+. If you really want to use Foundation 5 in IE8, then you'll need to either not use any of the Foundation JavaScript features, or look at using the Foundation 3/4 JavaScript.

For anyone having trouble getting the base CSS version of Foundation 5 working on IE8, here is an example with it all working: www.pswd.biz/f5-ie8

meta vurt over 5 years ago

@Corl DeLuna - please please PLEASE read the actual documentation from Windows before spouting off stats and sounding like an M$ fanboy.

IE8 IS INCOMPATIBLE with Windows 7. Ergo, support for IE8 from Microsoft will end this year --- April 8th, to be exact, as seen here:

http://windows.microsoft.com/en-us/windows/lifecycle

thank you.

Derek Paul over 5 years ago

@meta vurt:

No, your assertion that IE8 is incompatible with Win7 is simply not true. In fact, Microsoft even offers a VM on their IE compatibility page that runs IE8 on Win7. So.... please stop circulating false info.

Jake Wilson over 5 years ago

I get the following JS error in IE8 when loading the page:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 21 Jan 2014 04:42:21 UTC

Message: Object expected
Line: 221
Char: 9
Code: 0
URI: http://entegracoach.jake.hp/js/foundation/foundation.js

And
Line 221:

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

Any clue what the problem is here? How do I fix this?

Jeremy Englert over 5 years ago

From my understanding, all of the Foundation jQuery elements will work on jQuery 1.9.

If this is true, simply having the browser load jQuery 1.9 instead of 2.0 would allow jQuery elements to work in IE8.

Lars Moelleken over 5 years ago

Hi, I have also try to use Foundation + IE8 ... so here are my results:

jQuery 1.10.2 - OK
Foundation JS - OK

Responsive-Grid - OK
CSS-Style - need some work

-> http://moelleken.org

Mfg Lars

Esa Rantanen over 5 years ago

@Derek Paul

You're right, Win7 Ultimate (no service pack!) installation DVD includes IE8 as default browser.
I have it always running on VirtualBox on my Mac and Debian for quick and easy testing.

Will Barker over 5 years ago

The biggest challenge is getting the JS to work now foundation & jquery 2 have abandoned < ie8

I found fixing up the layout issues fairly simple with a bit of polyfilling and some specific .ie css rules. Fixing the JS just for ie8 wasn't required though, so i just don't load foundation.js for ie8 and get everything to gracefully downgrade. Good enough.

Wilf Horsfall over 5 years ago

Has anyone tried this method with Foundation 5 yet? http://zurb.com/article/1204/getting-foundation-and-ie8-to-play-nice

Seems ok if you're using vanilla css, but if you're using sass, how do you get your custom stylesheet written into both F5 and F3's stylesheets? Unless you're supposed to do it manually.

I read on this post people talking about falling back on F4 for IE8 support, but F4 doesn't support IE8 - are you using these fixes to get that to work: https://gist.github.com/replete/7082477 and https://gist.github.com/tmayr/5190565

Just wondering if there's a solution to this other than hoping IE8 definitely dies in April.

R Fletch over 5 years ago

Reveal Modal working in IE8 with simple javascript in Zurb Foundation 5.

Add an onclick function to button which only works in IE8 and below. This works because IE8 and below don't support "addEventListener", only "addEvent".

Could use this same javascript workaround to "fix" other Foundation features in IE8.

<a href="#" data-reveal-id="signupModal" data-reveal>
  <div class="button radius" onclick="ie8modal();">Get Started Now</div>
</a>
 function ie8modal() {
  if (!document.addEventListener) {
    document.getElementById('signupModal').style.display = 'block';
    document.getElementById('signupModal').style.opacity = '0';
    document.getElementById('signupModal').style.visibility = 'visible';
  }
}

Jared McMorris over 5 years ago

The media query polyfill seems to work for me, but I just cannot get the REM one to work. The only way I can get REMs to work is to go into the Foundation CSS and do a search/replace for REM with EM, but this messes up some of my layout.

Matt Bainton over 5 years ago

@Jared, if you are using the Grunt + libsass version of Foundation 5, it is pretty trivial to fix the REM support issue by adding grunt-pixrem task to post-process your compiled css. That was one of the easiest parts of this puzzle.

Christian Romeni over 5 years ago

Hi... I have now tried everything offered here... But nothing seems to make my page work in IE8 :(
Is there someone who could take a look? I'm really out of ideas now...... Please let me know so I can contact you with details.
Thanks....

Chris Goers over 5 years ago

Here's how I got reveal-modals, accordions, and tabs to work in IE8 after downgrading jQuery to 1.11 and using some of the polyfills earlier in the thread:

 $(document).ready(function(){
  // REVEAL MODALS
  $('a[href="#"]').click(function(){
    var id = $(this).attr('data-reveal-id');
    $('#' + id).css({'display':'block', 'width':'600px', 'opacity':'1', 'visibility':'visible'});
  });
  $('.close-reveal-modal').click(function(){
    $(this).parent().css({'display':'none'});
  });
  // ACCORDION
  $('.accordion a').click(function(){
    var accid = $(this).attr('href');
    $('.accordion .content').removeClass('active');
    $(accid).addClass('active');
  });
  // TABS
  $('.tabs dd a').click(function(){
    var tabid = $(this).attr('href');
    $('.tabs dd').removeClass('active');
    $('.tabs-content .content').removeClass('active');
    $(this).parent().addClass('active');
    $(tabid).addClass('active');
  });
});

Of course you would modify the modal css to whatever suits your needs.

Ty Cahill over 5 years ago

I'm in the same boat as many of you. My clients see about 10% of visits coming from IE8, which is a significant number. (Anyone at ZURB want to reduce their paycheck by 10%?)

I don't think IE8 is going to die away soon. I work a lot with government agencies who are stuck with IE 8 because their enterprise software won't run on anything else. Yes, it's stupid, but nothing we can do about that.

For now I must switch over to Bootstrap, although I really don't want to.

Foundation went too bleeding edge on us. Would have been better to make it work on IE 8 and progressive enhance for modern browsers. Even jQuery cautions people against using 2.x right now. I hope to return to Foundation in a couple years if the browser landscape changes significantly.

Toby Stokes over 5 years ago

Worth mentioning here, as this was blocking IE8 rendering for me -
If you load any @font-face declarations via css, this will cause selectivizer polyfill to give a blank screen for IE8
http://stiankarlsen.me/blog/how-to-fix-selectivizr-in-ie8/
Foundation (used to at least) load the Open sans font, which can be disabled http://foundation.zurb.com/forum/posts/420-open-sans-font-import-and-slow-load-times

samjin over 5 years ago

Toby Stokes, a quick fixed for that blank text problem can be fixed by Span { color: #whatevercolor ] to override generated span { color:white;} in IE. Hence you don't have to disable open sans and affect modern browsers. Let me know if that worked.

Devin Andrews over 5 years ago

This isn't working for me for some reason..