Foundation 4 grid support for Internet Explorer 8

Question

I'm using the latest Zurb Foundation (4.0.4 at time of writing).

I would like Internet Explorer to work with it. Is this possible?

I tried changing around the CSS quite a bit but nothing seems to make it's layout like in Firefox.

I tried changing the columns display to inline but it broke the layout even more.

The main html that I want to look like in FF looks like this:

<div class="row">
  <div class="large-6 columns">
    <label for="amount">Amount:</label>
    <input id="amount" type="text">
  </div>
  <div class="large-6 columns">
    <label for="isbn">ISBN:</label>
    <input maxlength="13" id="isbn" type="text">
  </div>
</div>

Answer 1

There is partial support for IE in Foundation 4 that can be found on the Support Page. They also mention a gist that allows better grid implementation on ie8.

Maybe this can be improved by switching out Zepto for jQuery? Also, you can always use foundation 3.2.5 which has better ie support. See the F3 Support Docs. It says there is IE 8+ support out of the box, without modifications, but no mention of IE 7 or below.

Answer 2

There's also a good fix for IE7 as well:

https://github.com/Schepp/box-sizing-polyfill

It can make the Foundation 3 grids work on IE7 and 8, not tried it with 4 yet but it's worth a shot!

Answer 3

Here is a link to the updated grid-fix that will help with IE8. https://gist.github.com/hatefulcrawdad/5068210#file-ie8-grid-foundation-4-css