A mixin for fixing foundation columns in i.e8 and below

Add this to your page

<!--[if lte IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

The mixin

@mixin columnFix{
    $i: 1;
    @while $i < 13 {
        & .large-#{$i} {
            width: ($i/12)*100%;
        $i: $i + 1;

.lt-ie9 {
    @include columnFix;

Nice work Calleb but Zurb already support an official fix that ensures the Foundation 4 grid works in IE8, see the below links.


This mixin fixes the grid problems for ie7 and 8