ZURB Foundation 4 - IE8 Fixes

_ie8-grid-fix

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
 
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
 
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
 
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
 
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
 
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
 
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
 
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
 
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
 
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
 
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
 
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
 
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
 
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
 
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
 
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
 
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
 
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
 
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }

_ie8-top-bar-fix

.lt-ie9 .top-bar {
  background: #2f2f2f;
  *zoom: 1;
  overflow: visible; 
}
.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
  content: " ";
  display: table; 
}
.lt-ie9 .top-bar:after { clear: both; }
.lt-ie9 .top-bar .toggle-topbar { display: none; }
.lt-ie9 .top-bar .title-area { float: left; }
.lt-ie9 .top-bar .name h1 a { width: auto; }
.lt-ie9 .top-bar input,
.lt-ie9 .top-bar .button {
  line-height: 2em;
  font-size: 0.875em;
  height: 2em;
  padding: 0 10px;
  position: relative;
  top: 8px; 
}
.lt-ie9 .top-bar.expanded { background: #111111; }
.lt-ie9 .contain-to-grid .top-bar {
  max-width: 57.5em;
  margin: 0 auto; 
}
.lt-ie9 .top-bar-section {
  -webkit-transition: none 0 0;
  -moz-transition: none 0 0;
  transition: none 0 0;
  left: 0 !important; 
}
.lt-ie9 .top-bar-section ul {
  width: auto;
  height: auto !important;
  display: inline; 
}
.lt-ie9 .top-bar-section ul li { float: left; }
.lt-ie9 .top-bar-section ul li > a { padding-right: 14px !important; }
.lt-ie9 .top-bar-section ul li .js-generated { display: none; }
.lt-ie9 .top-bar-section li a:not(.button) {
  padding: 0 15px;
  line-height: 45px;
  background: #111111; 
}
.lt-ie9 .top-bar-section li a:not(.button):hover { background: #2b2b2b; }
.lt-ie9 .top-bar-section .has-dropdown > a { padding-right: 35px !important; }
.lt-ie9 .top-bar-section .has-dropdown > a:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
  margin-top: -2.5px; 
}
.lt-ie9 .top-bar-section .has-dropdown.moved { position: relative; }
.lt-ie9 .top-bar-section .has-dropdown.moved > .dropdown { visibility: hidden; }
.lt-ie9 .top-bar-section .has-dropdown:hover > .dropdown, 
.lt-ie9 .top-bar-section .has-dropdown:active > .dropdown { visibility: visible; }
.lt-ie9 .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
  border: none;
  content: "\00bb";
  margin-top: -7px;
  right: 5px; 
}
.lt-ie9 .top-bar-section .dropdown {
  left: 0;
  top: auto;
  background: transparent; 
}
.lt-ie9 .top-bar-section .dropdown li a {
  line-height: 1;
  white-space: nowrap;
  padding: 7px 15px;
  background: #1e1e1e; 
}
.lt-ie9 .top-bar-section .dropdown li label {
  white-space: nowrap;
  background: #1e1e1e; 
}
.lt-ie9 .top-bar-section .dropdown li .dropdown {
  left: 100%;
  top: 0; 
}
.lt-ie9 .top-bar-section > ul > .divider {
  border-bottom: none;
  border-top: none;
  border-right: solid 1px #2b2b2b;
  border-left: solid 1px black;
  clear: none;
  height: 45px;
  width: 0px; 
}
.lt-ie9 .top-bar-section .has-form {
  background: #111111;
  padding: 0 15px;
  height: 45px; 
}
.lt-ie9 .top-bar-section ul.right li .dropdown {
  left: auto;
  right: 0; 
}
.lt-ie9 .top-bar-section ul.right li .dropdown li .dropdown { right: 100%; }

index

<!DOCTYPE html>
<!--[if lt IE 9]> <html class="no-js lt-ie9"> <![endif]-->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- ADD THIS LINE TO MAKE IT WORK -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  
  <!-- MAKE SURE THAT MODERNIZR IS IN THE HEAD -->
  <script src="/js/custom.modernizr.js"></script>
</head>