Posted By

depiction on 01/03/14


Tagged


Versions (?)

Foundation 4 or 5 IE8 Support


 / Published in: CSS
 

CSS code to make Foundation 4 (or 5) support IE8. Please note that this has been modified for 16 columns. If you are using 12 columns, please see https://gist.github.com/hatefulcrawdad/5068210

  1. This assumes you have a .lt-ie9 class in your html tag:
  2.  
  3. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  4. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  5. <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
  6. <!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
  7. <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  8.  
  9.  
  10.  
  11. CSS:
  12.  
  13. /* Foundation 4 Hack for IE8 from https://gist.github.com/hatefulcrawdad/5068210
  14.  ---------------------- */
  15.  
  16. .lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
  17. .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
  18. .lt-ie9 .row.large-collapse .column,
  19. .lt-ie9 .row.large-collapse .columns { padding: 0; }
  20. .lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
  21. .lt-ie9 .row .row.large-collapse { margin: 0; }
  22.  
  23. .lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
  24. .lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
  25.  
  26. .lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
  27. .lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
  28.  
  29. .lt-ie9 .large-1,
  30. .lt-ie9 .row .large-1 { width: 6.25%; }
  31.  
  32. .lt-ie9 .large-2,
  33. .lt-ie9 .row .large-2 { width: 12.5%; }
  34.  
  35. .lt-ie9 .large-3,
  36. .lt-ie9 .row .large-3 { width: 18.75%; }
  37.  
  38. .lt-ie9 .large-4,
  39. .lt-ie9 .row .large-4 { width: 25%; }
  40.  
  41. .lt-ie9 .large-5,
  42. .lt-ie9 .row .large-5 { width: 31.25%; }
  43.  
  44. .lt-ie9 .large-6,
  45. .lt-ie9 .row .large-6 { width: 37.5%; }
  46.  
  47. .lt-ie9 .large-7,
  48. .lt-ie9 .row .large-7 { width: 43.75%; }
  49.  
  50. .lt-ie9 .large-8,
  51. .lt-ie9 .row .large-8 { width: 50%; }
  52.  
  53. .lt-ie9 .large-9,
  54. .lt-ie9 .row .large-9 { width: 56.25%; }
  55.  
  56. .lt-ie9 .large-10,
  57. .lt-ie9 .row .large-10 { width: 62.5%; }
  58.  
  59. .lt-ie9 .large-11,
  60. .lt-ie9 .row .large-11 { width: 68.75%; }
  61.  
  62. .lt-ie9 .large-12,
  63. .lt-ie9 .row .large-12 { width: 75%; }
  64.  
  65. .lt-ie9 .large-13,
  66. .lt-ie9 .row .large-13 { width: 81.25%; }
  67.  
  68. .lt-ie9 .large-14,
  69. .lt-ie9 .row .large-14 { width: 87.5%; }
  70.  
  71. .lt-ie9 .large-15,
  72. .lt-ie9 .row .large-15 { width: 93.75%; }
  73.  
  74. .lt-ie9 .large-16,
  75. .lt-ie9 .row .large-16 { width: 100%; }
  76.  
  77. .lt-ie9 .row .large-offset-1 { margin-left: 6.25%; }
  78. .lt-ie9 .row .large-offset-2 { margin-left: 12.5%; }
  79. .lt-ie9 .row .large-offset-3 { margin-left: 18.75%; }
  80. .lt-ie9 .row .large-offset-4 { margin-left: 25%; }
  81. .lt-ie9 .row .large-offset-5 { margin-left: 31.25%; }
  82. .lt-ie9 .row .large-offset-6 { margin-left: 37.5%; }
  83. .lt-ie9 .row .large-offset-7 { margin-left: 43.75%; }
  84. .lt-ie9 .row .large-offset-8 { margin-left: 50%; }
  85. .lt-ie9 .row .large-offset-9 { margin-left: 56.25%; }
  86. .lt-ie9 .row .large-offset-10 { margin-left: 62.5%; }
  87. .lt-ie9 .row .large-offset-11 { margin-left: 68.75%; }
  88. .lt-ie9 .row .large-offset-12 { margin-left: 75%; }
  89. .lt-ie9 .row .large-offset-13 { margin-left: 81.25%; }
  90. .lt-ie9 .row .large-offset-14 { margin-left: 87.5%; }
  91. .lt-ie9 .row .large-offset-15 { margin-left: 93.75%; }
  92.  
  93. .lt-ie9 .pull-2 { right: 12.5%; }
  94. .lt-ie9 .pull-3 { right: 18.75%; }
  95. .lt-ie9 .pull-4 { right: 25%; }
  96. .lt-ie9 .pull-5 { right: 31.25%; }
  97. .lt-ie9 .pull-6 { right: 37.5%; }
  98. .lt-ie9 .pull-7 { right: 43.75%; }
  99. .lt-ie9 .pull-8 { right: 50%; }
  100. .lt-ie9 .pull-9 { right: 56.25%; }
  101. .lt-ie9 .pull-10 { right: 62.5%; }
  102. .lt-ie9 .pull-11 { right: 68.75%; }
  103. .lt-ie9 .pull-12 { right: 75%; }
  104. .lt-ie9 .pull-13 { right: 81.25%; }
  105. .lt-ie9 .pull-14 { right: 87.5%; }
  106. .lt-ie9 .pull-15 { right: 93.75%; }
  107.  
  108. .lt-ie9 .push-2 { left: 12.5%; }
  109. .lt-ie9 .push-3 { left: 18.75%; }
  110. .lt-ie9 .push-4 { left: 25%; }
  111. .lt-ie9 .push-5 { left: 31.25%; }
  112. .lt-ie9 .push-6 { left: 37.5%; }
  113. .lt-ie9 .push-7 { left: 43.75%; }
  114. .lt-ie9 .push-8 { left: 50%; }
  115. .lt-ie9 .push-9 { left: 56.25%; }
  116. .lt-ie9 .push-10 { left: 62.5%; }
  117. .lt-ie9 .push-11 { left: 68.75%; }
  118. .lt-ie9 .push-12 { left: 75%; }
  119. .lt-ie9 .push-13 { left: 81.25%; }
  120. .lt-ie9 .push-14 { left: 87.5%; }
  121. .lt-ie9 .push-15 { left: 93.75%; }
  122.  
  123. /* Nicolas Gallagher's micro clearfix */
  124. .lt-ie9 .row { *zoom: 1; }
  125. .lt-ie9 .row:before, .row:after { content: " "; display: table; }
  126. .lt-ie9 .row:after { clear: both; }

Report this snippet  

You need to login to post a comment.