Skip to content
Storm Menu

Storm News.30.08.2012 - 2 min read

Making Zurb Foundation 3 work on IE7

I love Zurb Foundation.  It’s my current favourite CSS framework for quickly building sites.  I find its grid system intuitive, it doesn’t try to style things too much and its features for making sites responsive are fantastic.   However, it doesn’t support IE 7.

Now this normally isn’t a problem, we’ve looked at the numbers and we’re pretty happy ignoring IE 7 or doing ‘just enough’.  For a current client that isn’t an option, we’re developing an internal system and they are still running IE 7 on all of their workstations.  IE7 is an absolute must.

So, how do we go forward?  Do we throw out all of the nice goodies in Foundation and go back to basics?  Do we fall back to an old version? 2.2.1 supports IE7.  No.  We weren’t convinced by either of those arguments, so we looked at what failed to work in Foundation 3 on IE7.  It turns out the single biggest issue is Foundation’s use of box-sizing: border-box.  IE7 also doesn’t support media queries, so the responsive goodies wouldn’t work – but responsive is really about supporting different devices, not desktops with very small browser windows.  So what can we do to work around this?

Polyfill to the rescue!

It only took 1 Google to turn up this excellent box-sizing polyfill/shim.  We chucked that in our site and changed the first line of foundation.css to be

* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  *behavior: url(/js/boxsizing.htc); 
}

and hey presto!  The Zurb grid system works in IE7! There might be some other small quirks, but we’ve not found anything yet.

So why do this? Why not go back to basics and write CSS that just works on IE7? We can continue to use a framework we are confortable with, we continue to benefit from the excellent responsive design features if staff access the site from mobile or tablet devices and we are fully ready for the company to upgrade to a modern browser in the future.

Update

Please Note: The HTC file URL must be relative to your HTML document, not relative to your CSS file. So I’d advise you to use absolute paths like in the example.

Related news.