Foundation and IE8

The Foundation is a free front-end framework. The framework is really easy to use and it supports all modern browsers and browsers on mobile devices.

The problem is when you want to use the Foundation on old and outdated Internet Explorer 8 or 7. At ZURB decided to support only modern browsers since Foundation 4 and don’t give any support for IE8 or older.

Foundation FAQ: most of today’s popular browsers automatically upgrade themselves including Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE supported on Windows XP, which Microsoft will officially stop supporting next year. That played a part in our decision.

The solution?

I decided to load Foundation 5 for IE9+, Chrome, FireFox, etc. and Foundation 4 for IE8 and older. My solution does not work well on IE7, but I don’t care because less than 1% worldwide users uses IE7.

We put this code to the tag to apply styles for IE8 grid fix.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->

Second part is to load different styles:

<!--[if lte IE 8]>
  <link rel="stylesheet" href="/css/foundation-v4.css" />
  <link rel="stylesheet" href="/css/ie8-grid.css" />
<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
  <link rel="stylesheet" href="/css/foundation-v5.css" />
<!--<![endif]-->

The last part is to load the different libraries (Foundation 4 and 5) and for IE8 and older we require:

<!--[if lt IE 9]>
  <script src="/js/foundation-v4.min.js"></script>
  <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]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
  <script src="/js/foundation-v5.min.js"></script>
<!--<![endif]-->



References:

Image resources:
– IE8 logo (Google search)
Foundation guy

Leave a Reply