Menu icon Foundation
Urgent! I need to support foundation 4 in ie8

hi all, took months trying to improve the view of foundation 4 in ie8 but nothing turns me. Please is urgent need to improve it if anyone knows how to do it and explain it to me, I will be grateful.

ie8Foundation 4

hi all, took months trying to improve the view of foundation 4 in ie8 but nothing turns me. Please is urgent need to improve it if anyone knows how to do it and explain it to me, I will be grateful.

Karl Ward over 5 years ago

not sure what you are trying to do ... Foundation 4 supports IE8, but not all your CSS will work properly in IE8. What is your link, and what "view" are you trying to improve?

Julian Ćwirko over 5 years ago

Take a look at : selectivizr.js and respond.js polyfills

Rafi Benkual over 5 years ago

Hi Pablo,

We use Foundation 3 and 4 in client projects if they need IE8 support. Some things cannot be done (easily).

Can you elaborate on what specifically you need guidance with? We may have some experience with it.

P.V.Durgaprasad over 5 years ago

For IE8, I used the following code picked from googlegroups .....
For IE7 and below display some warning to migrate them to IE8 or above.

/* Foundation 4- CSS for IE8 */
.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; }

/* Foundation Visibility HTML Classes fix for IE */
.lt-ie9 .show-for-small,
.show-for-medium-down,
.show-for-large-down {
display: none !important; }

.lt-ie9 .show-for-medium,
.show-for-medium-up,
.show-for-large,
.show-for-large-up,
.show-for-xlarge {
display: none !important; }

.lt-ie9 .hide-for-medium,
.hide-for-medium-up,
.hide-for-large,
.hide-for-large-up,
.hide-for-xlarge {
display: block !important; }

.lt-ie9 .hide-for-small,
.hide-for-medium-down,
.hide-for-large-down {
display: block !important; }

Michael Sneed over 5 years ago

Would I just use a conditional comments linking to a css file for this?

Could someone suggest the code?

Thanks!
Michael

Pet over 5 years ago

When used in IE8 compatibility is completely disordered grid