Menu icon Foundation
Simple Solution for IE8 and Foundation 5

I am working on a project that has a loose requirement for supporting IE8. The site does not have to be perfect, but it should at least be navigable. After many hours of wrestling with Foundation, I have settled on the following:

One of the first things to do is tell IE8 to render as Edge. There are two ways to do this. The best is to pass an HTTP header. This is because it will override the users’ settings in their browser (or if their administrator has set their browser to emulate IE7 or something).

Configure your web server to pass the following header. It will tell IE to ignore the compatibility setting specified by the user:

X-UA-Compatible: IE=edge
            

         

For ASP.NET, you can add this to your web.config to pass the header

<system.webServer>
<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=edge" />
  </customHeaders>
</httpProtocol>               
</system.webServer>         
         

If you can’t control the headers coming from your web server, you can set meta tags in the HTML.

<head>
<!--[if (IE)&(lt IE 9) ]>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!--<![endif]-->
<!--[if (IE)&(gt IE 8) ]>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
</head>
            

         

You may need to experiment with the EmulateIE8 versus Edge settings to see if you need one or the other, or both.

Add this css class to the HTML tag:

<html class="ie8-custom">
            

         

The “ie8-custom” CSS Class allows for selectively applying the CSS classes below.

Load this CSS:

HTML.ie8-custom {
    .small-1.columns,.medium-1.columns,.large-1.columns {width:8.0% !important;}
    .small-2.columns,.medium-2.columns,.large-2.columns {width:16.0% !important;}
    .small-3.columns,.medium-3.columns,.large-3.columns {width:25% !important;}
    .small-4.columns,.medium-4.columns,.large-4.columns {width:33.0% !important;}
    .small-5.columns,.medium-5.columns,.large-5.columns {width:41.0% !important;}
    .small-6.columns,.medium-6.columns,.large-6.columns {width:50% !important;}
    .small-7.columns,.medium-7.columns,.large-7.columns {width:58.0% !important;}
    .small-8.columns,.medium-8.columns,.large-8.columns {width:66.0% !important;}
    .small-9.columns,.medium-9.columns,.large-9.columns {width:75% !important;}
    .small-10.columns,.medium-10.columns,.large-10.columns {width:83.0% !important;}
    .small-11.columns,.medium-11.columns,.large-11.columns {width:91.0% !important;}
    .small-12.columns,.medium-12.columns,.large-12.columns {width:100% !important;}
 
 
    .top-bar-section UL { width:inherit !important; }
    .top-bar-section UL LI { float:left !important; }
    .top-bar { height:inherit !important; }
       .row { width: 960px !important; }
       .row .row { width: 100% !important; }
 
}
            

         

The column settings are in here because I found that for some reason, IE was not combining the “columns” selector with the various width selectors and was treating all columns as full width.

Notice that I had to hard-code the width of the outer “row” selector. This seems to stem from IE8 not knowing the width of the row element when it goes to center it. This is probably the worst part of the hack because all the other hacks remain flexible when settings are changed in Foundation.

The rows inside of other rows, had to have their width of 100% restored.

Load this jQuery:

jQuery(document).ready(function () {
 
            if (jQuery("HTML").hasClass("ie8-custom")) {
                for (var c = 1; c <= 12; c++) {
                    jQuery('.small-' + c + '[class*="medium"]').removeClass("small-" + c);
                    //Perform any other column-specific adjustments your design may require here
                }
                jQuery('.show-for-small').remove();
                jQuery('.hide-for-small').removeClass('hide-for-small');
                jQuery('.top-bar-section UL').css({ width: "inherit" });
                jQuery('.top-bar-section UL LI').css({ float: "left" });
                jQuery('.top-bar').css({ height: "inherit" });
            }
        });
            

         

Since IE8 will never be used for Mobile:

Any css selectors that specify settings for small as well as some other size, the settings for small must be removed. Otherwise, the small settings will override the larger ones.

Anything that should be only shown for small should be removed.

Foundation defines the top-bar as having a specific height. This works well outside of IE, so for IE, I change the height to inherit. You could instead change Foundation’s setting to make the top-bar always a inherit the height.

You can also find this on my blog: http://wp.me/p4iQM6-9

IEie8

I am working on a project that has a loose requirement for supporting IE8. The site does not have to be perfect, but it should at least be navigable. After many hours of wrestling with Foundation, I have settled on the following:

One of the first things to do is tell IE8 to render as Edge. There are two ways to do this. The best is to pass an HTTP header. This is because it will override the users’ settings in their browser (or if their administrator has set their browser to emulate IE7 or something).

Configure your web server to pass the following header. It will tell IE to ignore the compatibility setting specified by the user:

X-UA-Compatible: IE=edge
            

         

For ASP.NET, you can add this to your web.config to pass the header

<system.webServer>
<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=edge" />
  </customHeaders>
</httpProtocol>               
</system.webServer>         
         

If you can’t control the headers coming from your web server, you can set meta tags in the HTML.

<head>
<!--[if (IE)&(lt IE 9) ]>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!--<![endif]-->
<!--[if (IE)&(gt IE 8) ]>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
</head>
            

         

You may need to experiment with the EmulateIE8 versus Edge settings to see if you need one or the other, or both.

Add this css class to the HTML tag:

<html class="ie8-custom">
            

         

The “ie8-custom” CSS Class allows for selectively applying the CSS classes below.

Load this CSS:

HTML.ie8-custom {
    .small-1.columns,.medium-1.columns,.large-1.columns {width:8.0% !important;}
    .small-2.columns,.medium-2.columns,.large-2.columns {width:16.0% !important;}
    .small-3.columns,.medium-3.columns,.large-3.columns {width:25% !important;}
    .small-4.columns,.medium-4.columns,.large-4.columns {width:33.0% !important;}
    .small-5.columns,.medium-5.columns,.large-5.columns {width:41.0% !important;}
    .small-6.columns,.medium-6.columns,.large-6.columns {width:50% !important;}
    .small-7.columns,.medium-7.columns,.large-7.columns {width:58.0% !important;}
    .small-8.columns,.medium-8.columns,.large-8.columns {width:66.0% !important;}
    .small-9.columns,.medium-9.columns,.large-9.columns {width:75% !important;}
    .small-10.columns,.medium-10.columns,.large-10.columns {width:83.0% !important;}
    .small-11.columns,.medium-11.columns,.large-11.columns {width:91.0% !important;}
    .small-12.columns,.medium-12.columns,.large-12.columns {width:100% !important;}
 
 
    .top-bar-section UL { width:inherit !important; }
    .top-bar-section UL LI { float:left !important; }
    .top-bar { height:inherit !important; }
       .row { width: 960px !important; }
       .row .row { width: 100% !important; }
 
}
            

         

The column settings are in here because I found that for some reason, IE was not combining the “columns” selector with the various width selectors and was treating all columns as full width.

Notice that I had to hard-code the width of the outer “row” selector. This seems to stem from IE8 not knowing the width of the row element when it goes to center it. This is probably the worst part of the hack because all the other hacks remain flexible when settings are changed in Foundation.

The rows inside of other rows, had to have their width of 100% restored.

Load this jQuery:

jQuery(document).ready(function () {
 
            if (jQuery("HTML").hasClass("ie8-custom")) {
                for (var c = 1; c <= 12; c++) {
                    jQuery('.small-' + c + '[class*="medium"]').removeClass("small-" + c);
                    //Perform any other column-specific adjustments your design may require here
                }
                jQuery('.show-for-small').remove();
                jQuery('.hide-for-small').removeClass('hide-for-small');
                jQuery('.top-bar-section UL').css({ width: "inherit" });
                jQuery('.top-bar-section UL LI').css({ float: "left" });
                jQuery('.top-bar').css({ height: "inherit" });
            }
        });
            

         

Since IE8 will never be used for Mobile:

Any css selectors that specify settings for small as well as some other size, the settings for small must be removed. Otherwise, the small settings will override the larger ones.

Anything that should be only shown for small should be removed.

Foundation defines the top-bar as having a specific height. This works well outside of IE, so for IE, I change the height to inherit. You could instead change Foundation’s setting to make the top-bar always a inherit the height.

You can also find this on my blog: http://wp.me/p4iQM6-9

Iain Matchett about 5 years ago

For even more compatibility you'll want to add chromeframe in the mix:

Projects such as this:
https://code.google.com/p/css3-mediaqueries-js/
Also make media queries 'not fail as badly' in IE8

Wes Mann about 5 years ago

Bryan, thanks for taking the time to write that up! I had already followed these instructions
http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8 and got the layout appearance working "decent" .... but I'm still getting js errors in ie8. Did you find a solution for these errors? If you have a site online where you used this trick please share the url if you can.

Thanks very much.